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()中運行的代碼段中的邏輯。目前它只在頁面加載時才檢查頁面何時滾動。

$(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()