Question

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

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()中运行的代码段中的逻辑。目前它只检查页面滚动的时间而不是页面加载时。

$(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()上方即可

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

1 个答案: