固定 div 滚动

Question

我正在尝试创建一个 div，它只会在滚动时获取一个类，并且当 scroll 的值为 210 时。我有下一个代码：

$(document).ready(function() {
    var pageWidth = $(window).width();

    if(pageWidth > 700){
        var contentLeft = $('#content-left');
        var height = 210;

        $(window).scroll(function () {
            if ($(window).scrollTop() < height) {
                contentLeft.attr('class', 'content-left');
            } else {
                contentLeft.attr('class', 'content-left leftContentFixed');
            }
        });
    }
});

我尝试仅在台式机上应用它。 因此，如果它在智能手机或平板电脑上，我不需要 leftContentFixed 类。

如果我尝试类似的东西：

$(document).ready(function() {
    var pageWidth = $(window).width();

    if(pageWidth > 700){
        alert("Bigger than 700");
    }else{
        alert("Smaller than 700");
    }
});

比它完美，但用我的代码它不起作用。 尽管屏幕小于 700，但添加了 leftContentFixed 类。

有什么建议吗？

Answer 1

您需要在resize事件时检查屏幕大小，并在用户滚动页面时检查其值。 您可以创建mobile变量并使其true/false取决于屏幕大小，然后在scroll回调中检查其值并选择正确的类。

 $(document).ready(function() { var pageWidth = $(window).width(), height = 210, contentLeft = $('.content-left'), mobile = false; $(window).on('load resize', function() { pageWidth = $(this).width(); // Save mobile status if (pageWidth > 700) { mobile = false; } else { mobile = true } }) $(window).on('scroll', function() { if ($(window).scrollTop() > height) { // Set default class var _class = 'content-left leftContentFixed'; // If mobile then modify class if (mobile) { _class = 'content-left'; } contentLeft.attr('class', _class); } else { var _class = 'content-left'; contentLeft.attr('class', _class); } }); });

 html { height: 2000px } .content-left { background: gold; width: 50px; height: 100px; } .content-left.leftContentFixed { position: fixed; top: 0; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content-left"></div>