Question

我试图这样做，如果我滚过div或div的宽度，侧边栏就会固定。正如您所见here。

向下滚动，你会明白我的意思。我希望侧边栏从其相对位置滚动而不是跳过500px。我还想要一个if语句来告诉它返回哪个因为某些原因它在我尝试的时候并不喜欢。另一个主要问题是我使用@media来检测宽度，如果它低于某个宽度，我希望它不再被修复。

我希望很清楚，任何帮助都非常感激

Answer 1

您只需添加额外的top位置样式即可定义新顶部元素的位置。

$(document).ready(function(){
    $(window).scroll(function(){
        if ($(window).scrollTop() > 500){
            $('.fixed').css({'position': 'fixed', "top": "0px"});
        } else if ($(window).scrollTop() < 500){
            $('.fixed').css({'position': 'relative'});
        }
    });
});

执行此操作的首选方法是向要使用的元素添加id，在css中创建一个类（例如'fixed'），在该规则中添加适当的样式，然后使用{{1} }和.addClass('fixed')相应的。该代码看起来像这样：

jQuery的：

.removeClass('fixed')

CSS：

$(document).ready(function(){
    var elem = $('#sidebar');
    $(window).scroll(function(){
        if ($(window).scrollTop() > 500){
            elem.addClass('fixed');
        } else if ($(window).scrollTop() < 500){
            elem.removeClass('fixed');
        }
    });
});

如果您想解决媒体查询问题，只需将以下CSS添加到相应的媒体查询中：

.fixed {
    position: fixed;
    top: 0px;
}

Answer 2

将此css应用于ul.navbar-right：

position: relative;
right: 0;
top: 0;
z-index: 2000;

然后添加此javascript：

// Follow window scroll
$(window).scroll(function () {
    if ($(window).scrollTop() > 80) {
        $('.navbar-right').animate({ top: $(window).scrollTop() }, 60);
    } else {   
        $('.navbar-right').stop(true, true).css('top', '0px');
    }
});

它必须做到这一点......

您可以更改数字60以更改动画速度。

Answer 3

对于任何已解决的问题，您都可以使用CSS: Fixed

Example: 
.class {
    position: fixed;
    top: 100px;
    right: 100px;
}

jQuery滚动检测，如果否则

3 个答案: