.scroll（）不能像它應該那樣工作

所以我想讓我的頁眉出現在頁面向下滾動時，我想我可以用簡單的if語句來做到這一點。然而，我做到這一點的方式並沒有「監視」滾動操作。我的意思是它會自動將標題的高度設置爲0，而不是其他任何東西，當頁面向下滾動時它不會執行任何操作。.scroll（）不能像它應該那樣工作

我該如何重寫這個設置，當頂部滾動位置爲0時將標題的高度設置爲0，並在向下滾動到某種程度時將高度設置爲80px？

$(document).ready(function() { 

     if ($(window).scroll(0)) { 
      $('#header').css('height', '0'); 
     } 
     else{ 
      $('#header').css('height', '82px');  
     } 
});

來源

2017-10-07 Stefan Vujic

滾動它：

\t $(document).ready(function() { 
 
\t \t $('header').hide(); 
 
\t \t $(window).scroll(function(){ 
 
\t \t \t if ($(window).scrollTop()<56){ 
 
\t \t \t \t $('header').hide(); 
 
\t \t \t }else{ 
 
\t \t \t \t $('header').show(); 
 
\t \t \t } 
 
\t \t }); 
 
\t });

\t header{ 
 
\t \t background:#222; 
 
\t \t height:56px; 
 
\t \t position:fixed; 
 
\t \t top:0; 
 
\t \t left:0; 
 
\t \t width:100%; 
 
\t } 
 
\t body{ 
 
\t \t height:3000px 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header></header>

來源

2017-10-07 23:28:42

$(window).scroll(...將事件偵聽器附加到滾動事件或觸發該滾動事件，根據傳遞的參數。這是不是在所有用於獲取元素的當前滾動位置（在給定的情況下，它會始終返回window jQuery對象，這是總是 truthy。）

我相信你正在尋找做在下面的：

$(document).ready(function() { 
    if ($(window).scrollTop() == 0) { 
     $('#header').css('height', '0'); 
    } 
    else{ 
     $('#header').css('height', '82px');  
    } 
});

scrollTop()返回值，以像素爲單位（第一）元件已被滾動。這意味着如果它等於0，元素滾動到頂部（或..未渦卷）

來源

2017-10-07 23:31:25 George

萬一一個小動畫您有所幫助：

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    if ($(this).scrollTop() < 82) { 
 
     $("#header").css({ 
 
     "height": 0, 
 
     "border-bottom": "none" 
 
     }); 
 
    } else { 
 
     $("#header").css({ 
 
     "height": "82px", 
 
     "border-bottom": "1px solid #333" 
 
     }); 
 
    } 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    font-family: Helvetica, sans-serif; 
 
} 
 

 
#header { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 0; 
 
    border-bottom: none; 
 
    background: rgba(0, 0, 0, 0.99); 
 
    transition: 0.5s all ease; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    color: #fff; 
 
} 
 

 
#content { 
 
    line-height: 1.2; 
 
    font-size: 5em; 
 
}

<div id="header"> 
 
    <h3>I'm a header</h3> 
 
</div> 
 
<div id="content"> 
 
    <h3>Scroll Down</h3> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo purus, tempor id lobortis eget, pretium id lectus. Nam sed lorem quis velit efficitur gravida vel et enim. Ut laoreet sit amet enim ut tincidunt. Nunc vitae consectetur quam, ac varius 
 
    est. Ut ac sagittis nisi. Etiam luctus ullamcorper eros. Nam molestie consectetur risus, ac accumsan velit cursus efficitur. Phasellus porta neque ut arcu rutrum facilisis. Proin non imperdiet ante. Vestibulum elit augue, cursus et nulla id, volutpat 
 
    tincidunt ex. Nullam vitae nibh odio. Curabitur convallis sapien sit amet hendrerit vulputate. Phasellus sagittis suscipit augue nec congue. Pellentesque condimentum, eros vel auctor dapibus, velit enim sagittis nibh, sit amet efficitur erat sapien 
 
    ut turpis. Cras bibendum, ex ac elementum facilisis, neque libero lobortis nulla, id molestie lectus ex at felis. Praesent ut elementum dui, et vestibulum ipsum. Quisque in mi scelerisque, pharetra sem in, pellentesque ipsum. Nam ultrices, diam ac consectetur 
 
    viverra, nisl neque varius ante, vehicula semper ipsum velit at tellus. Sed velit massa, luctus id elit ut, volutpat rutrum erat. Nulla eu ipsum mauris. Etiam dictum viverra dui vel tempor. 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2017-10-07 23:38:26

.scroll（）不能像它應該那樣工作

回答

相關問題