javascript - 卡住元素(位置 :fixed) for specific scroll range

Question

我在这个网站 ( http://styleguide.co/medhelp/) 上工作，它有 5 个部分。对于其中一个部分(样式)，我有一个 sidenav，只要用户在该部分中滚动，我就会尝试停留在可见框架中。

这是我到目前为止所做的 - 我告诉部分标题和 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');
    }
});

我似乎想不出一个好方法来使部分标题“样式”和 sidenav 在我滚动到/从该部分滚动时出现/消失。有什么建议吗？我可以做些什么更好？ jsfiddle 中的简单解决方案演示真的很有帮助!

请单击此链接并向下/向上滚动以了解我指的是什么:http://styleguide.co/medhelp/

Answer 1

我不会给你一个 fiddle ，但你需要根据它与顶部的偏移量来确定下一个部分何时会粘住。目前你正在做的是:

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

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

// once next contact section comes into screen 
//(offset from the top of the screen <= screen height), give 
var winHeight = $(window).height();
var calcTop = 80 - (winHeight - (winHeight - $('#nextSelector').offset().top);
$('.fixed').css('top', calcTop);

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