我正在使用这个javaScript函数来修复右侧栏:
<script type="text/javascript">
$(document).ready(function () {
var top = $('#rightsidebar-wrapper').offset().top - parseFloat($('#rightsidebar-wrapper').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('#rightsidebar-wrapper').addClass('fixed');
} else {
// otherwise remove it
$('#rightsidebar-wrapper').removeClass('fixed');
}
});
});
</script>
这个CSS用于设计右侧栏div:
#rightsidebar-wrapper {
background: #ffffff;
width: 225px;
float: right;
margin-top: 8px 0px 0 0;
padding:0px;
word-wrap: break-word;
overflow: hidden;
}
#rightsidebar-wrapper.fixed {
position: fixed;
top: 5px;
}
这是右侧放置的侧边栏。 问题是当侧边栏顶部在滚动时遇到屏幕的顶端时,它会浮动到左侧。将此添加到CSS
right: 10%;
它修复了问题,但当页面被放大或缩小时,它再次失去了它的位置。 知道如何解决这个问题吗?
答案 0 :(得分:0)
那是因为位置:固定是用浮动排出的。可能你必须绝对通过JavaScript设置位置。您可以使用$(window).resize()来修复放大/缩小问题。
答案 1 :(得分:0)
我知道这篇文章太旧了但是我希望将来有人在寻找这个答案而不用Bootstrap可能会发现它很有用。它也适用于响应式网站。
首先,创建一个具有以下css属性的div。
#scroll_to{
padding: 25px;
display: inline-block;
float: right;
background-color: #eeeeee;
}
它将在窗口的右侧创建一个浮动框。
然后将此JS代码应用于您的div,它将起作用。
注意:请根据标题栏设置top:
值
var div_pos= $('#scroll_to').position().top;
$(document).on('scroll', function() {
var scroll_top= $(this).scrollTop();
if(scroll_top>=div_pos){
console.log("fix");
$('#scroll_to').css({
'position': 'fixed',
'right': '0',
'top': '36px'
});
}else{
$('#scroll_to').css({
'position': '',
'right': '',
'top': '36px'
});
}
});