我有一個Navaigation欄，只有當用戶將頁面滾動到大約100px時，我纔想要將其固定在頂部。僅在滾動時顯示元素

這是實現此目標的最佳方法嗎？

http://play.mink7.com/sophiance/

2013-06-01 Harsha M V

最好的方法是搜索粘性導航欄 –

@roasted我創建了粘條。但希望它只在滾動後出現 –

$(document).scroll(function() { 
     var y = $(this).scrollTop(); 
     if (y > 100) { 

      //when page scrolls past 100px 

     } else { 

      //when page within 100px 

     } 
    });

希望這有助於

來源

2013-06-01 13:24:17 shammelburg

這將堅持導航頂部窗口的頂部到達它有助於top.Hope的時刻。

var $window = $(window), 
      $navigation = $('#navigation'), 
      elTop = $navigation.offset().top; 

     $window.scroll(function() { 
      $navigation.toggleClass('fixed', $window.scrollTop() > elTop); 
     });

來源

2013-06-01 13:19:54

我應該在哪裏設置100px？ –

你只需把你的導航放在你想要的位置，它可以在任何距離從頂部，在這種情況下，100，然後把上面的代碼放在你的腳本，它會自動堅持到頂部時，它到達那裏。 –

使用jQuery添加滾動處理程序。
$("html, body").scroll(yourHandler() {});
然後，只需通過
$("html, body").scrollTop();
檢查滾動位置確定是否是隻要你想它去，然後添加一個CSS-Class，以它增加了固定屬性，例如導航欄滾動或如果你願意的話，更復雜一些。

不要忘記刪除類或任何其他更改，如果再次滾動回來。

來源

2013-06-01 13:22:25 luk2302

工作DEMO這裏... http://jsfiddle.net/eFCK3/1/

HTML

<div id="header-small">Header</div> 
<div> 
    <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p> 
</div>

CSS

#header-small{ 
    display:none;background:red;padding:2%;position:fixed;top:0px;width:960%;  
}

$ JQUERY

$(window).scroll(function() { 
    if ($(this).scrollTop()>100) { 
     $('#header-small').fadeIn(); 
    } else { 
     $('#header-small').fadeOut(); 
    } 
});

來源

2013-06-01 13:25:09 yeyene

僅在滾動時顯示元素

回答

HTML

CSS

相關問題