无法指定css position = fixed [英] unable to specify css position=fixed
本文介绍了无法指定css position = fixed的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有3个垂直div，即右侧边栏，内容，左侧栏。
当用户滚动页面，我想固定右侧边栏到顶部。
原因是什么？任何人都请帮助我。
-thanks
< script type =text / javascript>
function fixDiv（）{
var $ div = $（＃navwrap）;
if（$（window）.scrollTop（）> $ div.data（top））{
$（'＃navwrap'）。css（{'position'：'fixed' 'z-index'：'1'，'top'：'0'}）;
}
else {
$（'＃navwrap'）。css（{'position'：'static'，'top'：'auto'}）;
}
}
$（document）.ready（function（）{
$（＃navwrap）。data（top，$（＃navwrap） .offset（）。top）; //在加载时设置原始位置
$（window）.scroll（fixDiv）;
}）;
< / script>
HTML代码
< div class =container>
< div class =row clearfix>
< div class =col-md-3 columnid =navwrap>
< div class =btn-group>
< button class =btn btn-defaulttype =button>< em class =glyphicon glyphicon-align-left>< / em>< / button> < button class =btn btn-defaulttype =button>< em class =glyphicon glyphicon-align-center>< / em>< / button> < button class =btn btn-defaulttype =button>< em class =glyphicon glyphicon-align-right>< / em>< / button> < button class =btn btn-defaulttype =button>< em class =glyphicon glyphicon-align-justify>< / em>对齐< / button>
< / div>
< div class =row clearfix>
< div class =col-md-12 column>
< div class =btn-group>
< button class =btn btn-default> Action< / button> < button data-toggle =dropdownclass =btn btn-default dropdown-toggle>< span class =caret>< / span>< / button>
< ul class =dropdown-menu>
< li>
< a href =＃>操作< / a>
< / li>
< li class =disabled>
< a href =＃>另一个操作< / a>
< / li>
< li class =divider>
< / li>
< li>
< a href =＃>这里还有其他内容< / a>
< / li>
< / ul>
< / div>
< / div>
< / div>
< div class =list-group>
< a href =＃class =list-group-item active>首页< / a>
< div class =list-group-item>
列表头
< / div>
< div class =list-group-item>
< h4 class =list-group-item-heading>
列出组项目标题
< / h4>
< p class =list-group-item-text>
...
< / p>
< / div>
< div class =list-group-item>
< span class =badge> 14< / span>帮助
< / div> < a class =list-group-item>< span class =badge> 14< / span>帮助< / a>
< / div>
< / div>
< div class =col-md-9 column>
< div class =row clearfix>
< div class =col-md-9 column>
< p>
Lorem ipsum dolor sit amet，< strong> consectetur adipiscing elit< / strong> ;. Aliquam eget sapien sapien。 Curabitur在metus urna。在hac habitasse platea dictumst。鸡us，sed。。。 Nam purus nibh，lacinia non faucibus et，pharetra in dolor。 Sed iaculis posuere diam ut cursus。 < em> Morbi commodo sodales nisi id sodales。 Proin consectetur，nisi id commodo imperdiet，metus nunc consequat lectus，id bibendum diam velit et dui。< / em> Proin massa magna，vulputate nec bibendum nec，posuere nec lacus。 < small> Aliquam mi erat，aliquam vel luctus eu，pharetra quis elit。 Nulla euismod ultrices massa，et feugiat iipsum consequat eu。< / small>
< / p>
< / div>
< div class =col-md-3 column>
< p>
Lorem ipsum dolor sit amet，< strong> consectetur adipiscing elit< / strong> ;. Aliquam eget sapien sapien。 Curabitur在metus urna。在hac habitasse platea dictumst。鸡us，sed。。。 （Nam purus nibh），非水蚤（lacinia non faucibus）等等。 < small> Aliquam mi erat，aliquam vel luctus eu，pharetra quis elit。 Nulla euismod ultrices massa，et feugiat iipsum consequat eu。< / small>
< / p>
< / div>
< / div>
< / div>
< / div>
< / div>
解决方案
您正在使用引导程序，所以我认为很明显请使用其附加功能。
链接for jsFiddle $ b $b¨$ b $bÚ
只需包含 .col-sm-3的所有内容在另一个 div 并添加属性 data-spy ， data- top 和 data-offset-bottom ，根据它们，bootstrap会做所有的工作。 $ b $bÚ$ b $bÚ
否则您可以使用javascript代码：
$（'。sidebar'）。affix（{offset：{
top：60，
bottom：200
}）;
HTML ：
< div class =container>
< div class =row>
< div class =col-sm-3>
< div class =sidebardata-spy =affixdata-offset-top =60data-offset-bottom =200>
< div class =btn-group>
< button class =btn btn-defaulttype =button>< em class =glyphicon glyphicon-align-left>< / em>< / button>
< button class =btn btn-defaulttype =button>< em class =glyphicon glyphicon-align-center>< / em>< / button>
< button class =btn btn-defaulttype =button>< em class =glyphicon glyphicon-align-right>< / em>< / button>
< button class =btn btn-defaulttype =button>< em class =glyphicon glyphicon-align-justify> Justify< / button>
< / div>
< div class =row clearfix>
< div class =col-md-12 column>
< div class =btn-group>
< button class =btn btn-default> Action< / button>
< button data-toggle =dropdownclass =btn btn-default dropdown-toggle>< span class =caret>< / span>< / button>
< ul class =dropdown-menu>
< li>
< a href =＃>操作< / a>
< / li>
< li class =disabled>
< a href =＃>另一个操作< / a>
< / li>
< li class =divider>< / li>
< li>
< a href =＃>这里还有其他内容< / a>
< / li>
< / ul>
< / div>
< / div>
< / div>
< div class =list-group>
< a href =＃class =list-group-item active>首页< / a>
< div class =list-group-item>
列表头
< / div>
< div class =list-group-item>
< h4 class =list-group-item-heading>列出组项目标题
< / h4>
< p class =list-group-item-text>
...
< / p>
< / div>
< div class =list-group-item>
< span class =badge> 14< / span>帮助
< / div>
< a class =list-group-item>< span class =badge> 14< / span>说明< / a>
< / div>
< / div>
< / div>
< div class =col-md-9>
< div class =col-md-9>
< p>
Lorem ipsum dolor sit amet，< strong> consectetur adipiscing elit< / strong> ;. Aliquam eget sapien sapien。 Curabitur在metus urna。在hac habitasse platea dictumst。鸡us，sed。。 Nam purus nibh，lacinia non faucibus et，pharetra in dolor。 Sed iaculis posuere diam ut cursus。 < em> Morbi commodo sodales nisi id sodales。 Proin consectetur，nisi id commodo imperdiet，metus nunc consequat lectus，id bibendum diam velit et dui。< / em> Proin massa magna，vulputate nec bibendum nec，posuere nec lacus。 < small> Aliquam mi erat，aliquam vel luctus eu，pharetra quis elit。 Nulla euismod ultrices massa，et feugiat iipsum consequat eu。< / small>
< / p>
< / div>
< div class =col-md-3>
< p>
Lorem ipsum dolor sit amet，< strong> consectetur adipiscing elit< / strong> ;. Aliquam eget sapien sapien。 Curabitur在metus urna。在hac habitasse platea dictumst。鸡us，sed。。 （Nam purus nibh），非水蚤（lacinia non faucibus）等等。 < small> Aliquam mi erat，aliquam vel luctus eu，pharetra quis elit。 Nulla euismod ultrices massa，et feugiat iipsum consequat eu。< / small>
< / p>
< / div>
< / div>
< / div>
< / div>
I have 3 vertical div i.e right-sidebar, content, left-sidebar. When user scroll the page i want to fixed the right-sidebar to the top. Like this image
But currently when ever i scroll my page down , the second sidebar overlapps with first sidebar as shown in this image. What is the reason? anyone please help me. -thanks
<script type="text/javascript">
function fixDiv() {
var $div = $("#navwrap");
if ($(window).scrollTop() > $div.data("top")) {
$('#navwrap').css({'position': 'fixed','z-index': '1', 'top': '0'});
}
else {
$('#navwrap').css({'position': 'static', 'top': 'auto'});
}
}
$(document).ready(function () {
$("#navwrap").data("top", $("#navwrap").offset().top); // set original position on load
$(window).scroll(fixDiv);
});
</script>
HTML code
<div class="container">
<div class="row clearfix">
<div class="col-md-3 column" id="navwrap">
<div class="btn-group">
<button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-left"></em></button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-center"></em></button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-right"></em></button> <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-justify"></em> Justify</button>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="btn-group">
<button class="btn btn-default">Action</button> <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li class="disabled">
<a href="#">Another action</a>
</li>
<li class="divider">
</li>
<li>
<a href="#">Something else here</a>
</li>
</ul>
</div>
</div>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">Home</a>
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">
List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item">
<span class="badge">14</span>Help
</div> <a class="list-group-item"><span class="badge">14</span>Help</a>
</div>
</div>
<div class="col-md-9 column">
<div class="row clearfix">
<div class="col-md-9 column">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
<div class="col-md-3 column">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, osuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</div>
</div>
解决方案
You are using the bootstrap so I think it's obvious to use its affix feature.
Link for jsFiddle
Just wrap all content of .col-sm-3 in another div and add attributes data-spy, data-offset-top and data-offset-bottom and according to them bootstrap will do all the work.
Otherwise you can use javascript code:
$('.sidebar').affix({offset:{
top:60,
bottom:200
});
HTML:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="sidebar" data-spy="affix" data-offset-top="60" data-offset-bottom="200">
<div class="btn-group">
<button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-left"></em></button>
<button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-center"></em></button>
<button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-right"></em></button>
<button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-justify"></em>Justify</button>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<div class="btn-group">
<button class="btn btn-default">Action</button>
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li class="disabled">
<a href="#">Another action</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Something else here</a>
</li>
</ul>
</div>
</div>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">Home</a>
<div class="list-group-item">
List header
</div>
<div class="list-group-item">
<h4 class="list-group-item-heading">List group item heading
</h4>
<p class="list-group-item-text">
...
</p>
</div>
<div class="list-group-item">
<span class="badge">14</span>Help
</div>
<a class="list-group-item"><span class="badge">14</span>Help</a>
</div>
</div>
</div>
<div class="col-md-9">
<div class="col-md-9">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
<div class="col-md-3">
<p>
Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, osuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small>
</p>
</div>
</div>
</div>
</div>
这篇关于无法指定css position = fixed的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
