適當的方式來使用if/else語句與Windows滾動

我正在設計一個網頁，有兩個div; s在頁面頂部。我想當我滾動grater比50px第二個div移動到頂部的頁面，併成爲固定的，所以頁面的其餘部分在它下面滾動。這是我到目前爲止，任何幫助將受到歡迎。適當的方式來使用if/else語句與Windows滾動

$(document).ready(function() { 
$(window).scroll(function() { 
    if($(window).scrollTop() > 50) {  
     $('#navigation').css("position", "fixed"); 
    } 
    else{ 
     if($(window).scrollTop() < 50) {  
    $('#navigation').css("position", "none") 
    } 
    } 
});

}）;

CSS 
#page-header 
{ height:120px; 
background:none; 
border:1px solid #000; position: } 

#navigation 
{ width:100%; 
height:60px; 
border:1px solid #f00; } 

HTML 
<div id="page-header" > 
      <div id="toggle-menu"><a class="toggle-nav" href="#">&#9776;&nbsp;<span>MENU</span></a></div> 
       <div id="search-page"><a href="#"><h1>SEARCH</h1></a></div> 
      <div id="login-page"><a href="#"><h1>LOGIN</h1></a></div> 


     <div id="navigation" class="fixed_header"> 
      <div id="caption"><h1>Sophiscated web</h1></div> 
       <div id="menu"> 
         <ul id="nav"> 
          <li class="current-item"><a href="#">Home</a></li> 
          <li><a href="#">Product</a></li> 
          <li><a href="#">Service</a></li> 
          <li><a href="#">Support</a></li> 
          <li><a href="#">Contact</a></li> 
          <li><a href="#">About</a></li> 
         </ul> 
       </div><!-- menu Ends Here -->

來源

2015-10-19 Awakened2011

爲什麼你要使用'if（$（window）.scrollTop（）<50）{'當'else'部分自己描述那個？ –

您還需要設定最高值與位置沿像

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

#page-header { 
 
    height:120px; 
 
    background:none; 
 
    border:1px solid #000; 
 
    position: 
 
} 
 
#navigation { 
 
    width:100%; 
 
    height:60px; 
 
    border:1px solid #f00; 
 
} 
 
#navigation.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 

 
body{min-height: 800px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="page-header" > 
 
    <div id="toggle-menu"><a class="toggle-nav" href="#">&#9776;&nbsp;<span>MENU</span></a></div> 
 
    <div id="search-page"><a href="#"><h1>SEARCH</h1></a></div> 
 
    <div id="login-page"><a href="#"><h1>LOGIN</h1></a></div> 
 

 

 
    <div id="navigation" class="fixed_header"> 
 
     <div id="caption"><h1>Sophiscated web</h1></div> 
 
     <div id="menu"> 
 
      <ul id="nav"> 
 
       <li class="current-item"><a href="#">Home</a></li> 
 
       <li><a href="#">Product</a></li> 
 
       <li><a href="#">Service</a></li> 
 
       <li><a href="#">Support</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
       <li><a href="#">About</a></li> 
 
      </ul> 
 
     </div><!-- menu Ends Here -->

來源

2015-10-19 06:50:17

嘿，只是跟進。我已經將滾動頂部距離增加到了200px，有沒有辦法在滾動向下滾動時爲div添加1000ms的時間？ – Awakened2011

正如本頁所示http://www.google.com/analytics/#section-quote – Awakened2011

就快，我會根據是否期望的滾動位置添加一個類已經達到如此：

$(window).scroll(function() { 
    // This adds the class 'sticky' to the #navigation div if 
    // $(window).scrollTop() > 50 is true 
    $('#navigation').toggleClass('sticky', $(window).scrollTop() > 50); 
});

不過，我想通過不硬編碼50提高了它們，從頁面頂部的標題的我會動態獲取的偏移量和用這個代替：

var headerOffset = $('#caption').offset().top; 

$(window).scroll(function() { 
    $('#navigation').toggleClass('sticky', $(window).scrollTop() > headerOffset); 
});

這裏是一個的jsfiddle：https://jsfiddle.net/w58omkga/

來源

2015-10-19 07:14:22

適當的方式來使用if/else語句與Windows滾動

回答

相關問題