Question

我正在使用包含5个部分的此网站（http://styleguide.co/medhelp/）。对于其中一个部分（样式），我有一个sidenav我试图只要用户在该部分滚动就坚持在可见框架中。

这是我到目前为止所做的事情 - 我正在讲述部分标题＆amp;在该部分的顶部开始后，sidenav将坚持：

$(window).scroll(function(event) {

    var sw = $('.fixed'),
    pg = $('.styles'),
    diff = pg[0].offsetTop - window.pageYOffset;

    if (diff < 80 ) {
        $('.fixed').css('position', 'fixed');
        $('.fixed').css('top', '160px');
        $('.styles').css('position', 'fixed');
        $('.styles').css('top', '70px');

    }
    else {
        $('.fixed').css('position', 'relative');
        $('.fixed').css('top', '0px');
        $('.styles').css('position', 'relative');
        $('.styles').css('top', '0px');
    }
});

当我滚动到/从该部分滚动时，我似乎无法想出一个好的方法来使部分标题“Style”和sidenav出现/消失。有什么建议？我能做得更好吗？在jsfiddle中进行简单的解决方案演示真的会有所帮助！

请点击此链接＆amp;向下/向上滚动以了解我所指的内容：http://styleguide.co/medhelp/

Answer 1

我不打算给你一个小提琴，但你需要根据它从顶部偏移来确定下一部分何时会粘住。目前你正在做的是：

(x&255)=x%256

首先，这意味着条件永远不会被撤消。您需要做的是继续：

// if difference top and element < 80 -> fix to top, else position is relative

这会在新部分出现时让您的文字向上滚动。我希望这有帮助。此外，当向上滚动时，它不会重新粘住，但您可能已经意识到这一点。

冻结特定滚动范围

1 个答案: