jQuery - 在窗口滾動上運行一個沒有任何延遲的函數

我有一個jQuery功能的問題。你可以在這裏看到一個工作演示 - http://dev.sreejesh.in/menuissue/。正如你可以看到當用戶向下滾動到頁面時，我已經寫了一個jQuery函數（它將滾動滾動）來檢查滾動像素。當瀏覽器滾動到某個像素（sidemenu塊的高度）時，菜單塊將保持固定，其他內容將按正常方式滾動。jQuery - 在窗口滾動上運行一個沒有任何延遲的函數

該功能正在工作，但問題是menublocks使此功能運行時跳轉。我認爲這是因爲運行該功能的延遲。希望你們有任何好的技巧來解決這個問題。

我用一個if/else函數來檢查滾動像素，所以當滾動像素大於menublock高度時，它會添加一個「固定」類。

我使用下面的代碼。

HTML

<div id="globalwrapper"> 
    <div id="menubar"> 
     ---- Menu List items----- 
    </div> 
    <div id="mainblock"> 
     ----Main content area---- 
    </div> 
</div>

jQuery的

$(document).ready(function(){ 
    $(window).scroll(function() { 
     adjustScroll(); 
    }); 
}); 

function adjustScroll(){ 
    var windowHeight = $(window).height(); 
    var menublockHeight = $('#menubar').height(); 
    var scrollValue = $(document).scrollTop(); 
    var posValue = menublockHeight - windowHeight; 

    var menuStatus = $('#menubar').css('left'); 

    $('#menubar').css('minHeight', windowHeight); 
    $('#menubar').css('height', menublockHeight); 

    console.log(menuStatus); 

    $(document).scroll(function() { 
     if(menuStatus == '0px') { 
      if(scrollValue > posValue){ 
       $('#menubar').addClass('fixed'); 
       $('#menubar').css('marginTop', -posValue); 
      }else { 
       $('#menubar').removeClass('fixed'); 
       $('#menubar').css('marginTop', '0px'); 
      } 
     } 
    }); 
}

來源

2013-11-29 Sree

我覺得只有CSS可以解決這個問題，添加這種風格：

#menubar{ 
    position: fixed; 
}

谷歌瀏覽器只是測試，你可以試試看。

來源

2013-11-29 03:03:43

沒有。我已經使用「固定」類，它具有屬性位置：固定的。問題是jquery延遲了應用類。 – Sree

我的意思是直接使用此屬性，而不是通過javascript –

我需要使滾動某個像素後才能修復menublock。所以我無法避免JavaScript。 – Sree

jQuery - 在窗口滾動上運行一個沒有任何延遲的函數

回答

相關問題