jquery实现鼠标滚动时元素消失，不滚动的时候元素回来？

图片描述

我想实现的功能：

对于透明的那一块，我想在鼠标滚动的时候消失，但是鼠标不滚动的时候不消失。

但是如果利用scroll事件来监听滚动，如果我滚动的时候可以让它消失，但我不滚动的时候它也回不来了

$(function(){
    $(window).scroll(function(e) {
        $("#header").hide();
    });
});

html代码

<html>
<head>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.2.1/jquery.min.js"></script>

<script>
$(function(){
    $(window).scroll(function(e) {
        $("#header").hide();
    });
});
</script>

<style>
.main
{
    width: 700px;
    margin: 200px auto;
}
.header
{
position:fixed;
width:100%;
height:150px;
top:0px;
left:0px;
background: rgb(255, 255, 255);
background: rgba(255, 255, 255, 0.6);
background: transparent\9;
border: 1px solid #ccc;
}
</style>
</head>

<body>
<div class="header" id="header">
<div id="main" class="main">
Hello World
</div>
</body>
</html>

类似于知乎专栏，知乎专栏是鼠标向下滚动的时候不显示作者的信息，鼠标向上滚动的时候显示作者信息

阅读 5.9k

scroll() 方法的扩展

/*  
    对scroll()方法进行扩展
    在jQuery 中scroll()只可以监听滚动的时候的一个事件
    这段js可以监听scrollStart和scrollStop
*/
(function(){

    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    special.scrollStart = {
        setup: function() {
            var timer,
                handler =  function(evt) {
                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = 'scrollStart';
                        jQuery.event.handle.apply(_self, _args);
                    }

                    timer = setTimeout( function(){
                        timer = null;
                    }, special.scrollStop.latency);

                };

            jQuery(this).on('scroll', handler).data(uid1, handler);

        },
        teardown: function(){
            jQuery(this).off( 'scroll', jQuery(this).data(uid1) );
        }
    };

    special.scrollStop = {
        latency: 300,
        setup: function() {

            var timer,
                    handler = function(evt) {

                    var _self = this,
                        _args = arguments;

                    if (timer) {
                        clearTimeout(timer);
                    }

                    timer = setTimeout( function(){

                        timer = null;
                        evt.type = 'scrollStop';
                        jQuery.event.handle.apply(_self, _args);

                    }, special.scrollStop.latency);

                };

            jQuery(this).on('scroll', handler).data(uid2, handler);

        },
        teardown: function() {
            jQuery(this).off( 'scroll', jQuery(this).data(uid2) );
        }
    };

})();

调用方法：

(function(){
    jQuery(window).on('scrollStart', function(){
        console.log("start");
    });

    jQuery(window).on('scrollStop', function(e){
        console.log("end");
    });
})();

jquery实现鼠标滚动时元素消失，不滚动的时候元素回来？

我想实现的功能：

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

请问一下，如何理解reduce函数呢？

如何实现从一个div中拖拽dom到另一个div容器？