Question

＆＃13;

$(window).scroll(function () {
    if ($(this).scrollTop() > 100 || $('.header,.footer').css('opacity') ==1) {
        if($(window).width() > 478)
        {
            var elem = $('.header,.footer');
            setTimeout(function() {
                elem.css({"opacity":"0","transition":"2s"});
            },5000);            
            elem.css({"opacity":"1","transition":"1s"}); 
        } 
    } else {
       return false;
    }

});

＆＃13;

.header {top:0;position:fixed;width:100%;height:50px;background:red;}
.content {height:1500px;}
.footer {bottom:0;position:fixed;width:100%;height:50px;background:red;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
</head> 
<body>
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>

＆＃13;

我有一些func来隐藏div元素，在这个好社区的帮助下，但我需要更多的帮助

$(window).scroll(function () {
if($(window).width() > 1199)
{
    var elem = $('.header,.footer');
    setTimeout(function() {
        elem.css({"opacity":"0","transition":"2s"});
    },10000);            
    elem.css({"opacity":"1","transition":"1s"}); 
}   
});

我想在top = 0时设置禁用此功能的东西，或设置不透明度＆＃34; 1＆＃34;返回顶部或在页面顶部不褪色的东西提前10倍！

好吧，伙计们，我无法找到更好的解决方案，显示/隐藏或其他什么所以我添加片段更容易，如果有人找到解决方案为什么当回到顶部不透明度仍为0，我需要当回到顶部不透明度为1 10X

Answer 1

只需添加检查用户滚动的距离：

$(window).scroll(myController);

function myController() {
  if($(window).width() > 1199 && $(document).scrollTop() > 50) {

    var elem = $('.header,.footer');

    setTimeout(function() {
        elem.css({"opacity":"0","transition":"2s"});
    },10000);            

    elem.css({"opacity":"1","transition":"1s"}); 
  }   
}

注意1：你应该去除滚动事件，因为它会触发非常频繁。查看热门图书馆，例如underscore.js或custom实施。

注意2：您还应该缓存选择器（$(window)和$('.header, .footer')），因为每次滚动事件都会查找atm页眉和页脚。

Answer 2

您还要检查不透明度和顶部，以便您可以在下方使用。

$(window).scroll(function () {
    if ($(this).scrollTop() > 10 || $('.header,.footer').css('opacity') ==1) {
        if($(window).width() > 1199)
        {
            var elem = $('.header,.footer');
            setTimeout(function() {
                elem.css({"opacity":"0","transition":"2s"});
            },10000);            
            elem.css({"opacity":"1","transition":"1s"}); 
        } 
    } else {
       return false;
    }

});

滚动时jquery淡入淡出/不透明度但返回顶部时禁用

2 个答案: