的JavaScript生成的margin-top弄亂放置內容

我通過一些圖片在它滾動，而當你向下滾動，菜單和內容移動滑塊。一旦菜單到達頂部，它就會堅持下去，因爲它已經變成了一個固定的位置。

問題：

一旦菜單將捕捉到的地方，它重置它的從像素到0值的生成ammount的原始位置（邊距）。這種情況下跳轉的頁面產生了大量的像素，這不應該發生。它根本不應該跳下去，但我認爲它與在它被設置爲0之前生成的像素數量有關，在我的屏幕上的這些情況下有955個像素的差距。它在應用固定狀態後向下跳955個像素。

所以我的問題現在是，我該如何解決這個問題。我嘗試應用而不是邊距填充（不去，白色屏幕），應用而不是邊緣頂部：0px頂部：0所以我不必使用邊距，但也是一個不行。

案例鏈接：

http://test.thewebfanatics.com/jellyweb/home

代碼

$(window).scroll(function() { 
    if ($('.resolutionwrap').length == 1) { 
     var documentScrollTop = $(document).scrollTop() + 100; 
     var fixedToggle = $('#slides').height(); 

     if (documentScrollTop > fixedToggle) { 
      $('#hoofdmenu').addClass('fixed'); 
      $('#hoofdmenu').css("margin-top", "0px"); 
     } else { 
      $('#hoofdmenu').removeClass('fixed'); 
      $('#hoofdmenu').css("margin-top", $('#slides').height() - 100); 
     } 
    } 
});

希望有人能幫助我在這個問題上。

來源

2015-10-05 Dorvalla

您可以創建一個小提琴嗎？ – sinanspd

我會爲你效勞。這是我必須過濾的很多東西，但我會嘗試過濾出我能給的東西。 – Dorvalla

感謝您試圖幫助@sinanspd，但不再需要。因爲我要過濾掉一個小提琴，我得到了一個腦波。我應該早點看到這一點，但是我的想法太麻煩了，我從來沒有看到簡單的解決方案。 – Dorvalla

好的，當我在小提琴上發表評論時，我意識到如果內容移動了，我也可以簡單地通過將它返回到它的位置，通過使它的平衡值達到平衡。

簡而言之：我通過創建一個平衡該比例的不同邊緣頂部來對付邊距。這可能不是最美麗的解決方案，但它的確有竅門。

$(window).scroll(function() { 
    if ($('.resolutionwrap').length == 1) { 
     var documentScrollTop = $(document).scrollTop() + 100; 
     var fixedToggle = $('#slides').height(); 
//  console.log($('#slides').height()); 
//  console.log($('.resolutionwrap').height()); 

     if (documentScrollTop > fixedToggle) { 
      $('#hoofdmenu').addClass('fixed'); 
      $('#hoofdmenu').css("margin-top", "0px"); 
      $('.content').css("margin-top", $('#slides').height()); 
     } else { 
      $('#hoofdmenu').removeClass('fixed'); 
      $('#hoofdmenu').css("margin-top", $('#slides').height() - 100); 
      $('.content').css("margin-top", "0px"); 
     } 
    } 
})

來源

2015-10-05 15:12:14 Dorvalla

的JavaScript生成的margin-top弄亂放置內容

回答

相關問題