滚动到位置的 JQuery 事件...在页面刷新时重置

Question

我对 Web 开发比较陌生，我有一个问题。我创建了一个脚本，在滚动到某个点后将菜单移动到屏幕上。这是脚本：

SASS：

nav
    position: fixed
    top: 15%
    right: -325px
    -webkit-transition: right $menu-effect-duration-slow
    -moz-transition: right $menu-effect-duration-slow
    transition: right $menu-effect-duration-slow

JS：

$(document).ready(function() {
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if(top > 450) {
            $('nav').css("right", "0px");
        } else {
            $('nav').css("right", "-325px");
        }
    });
});

这非常有效，除了页面刷新。因为默认的 SASS 位置不在屏幕上，所以菜单从屏幕开始，然后移回到屏幕上（如果我滚动超过了阈值）。我希望它从正确位置的任何位置开始，而不是从 SASS 默认值开始。有没有人有任何首选的方法来完成这个？谢谢！

Answer 1

创建一个函数来检查您在$(document).ready() 中运行的 sn-p 中的逻辑。目前它只检查页面何时滚动而不是页面加载时。

$(document).ready(function() {
    moveNav();
    $(window).scroll(function() {
        var top = $(document).scrollTop();
        if(top > 450) {
            $('nav').css("right", "0px");
        } else {
            $('nav').css("right", "-325px");
        }
    });
});

function moveNav() {
  var top = $(document).scrollTop();
  if(top > 450) {
    $('nav').css("right", "0px");
  } else {
    $('nav').css("right", "-325px");
  }
}

您可能甚至不需要moveNav() 函数，只需将其内容移动到$(window).scroll() 上方$(document).ready() 内