.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（）不能像它应该那样工作

回答

相关问题