Jquery滚动事件返回原始

时间:2016-08-22 20:49:43

标签: jquery

$(document).scroll(function(){
    $("#linkd").css("opacity", "0.1");         
});

滚动时会改变不透明度但是当用户停止滚动时如何让它恢复原来的不透明度?

4 个答案:

答案 0 :(得分:1)

如果您开发移动页面,则可以使用内置的jQuery移动库 事件:scrollstart和scrollstop,并将原始不透明度保存在window.opacity位置以供以后恢复。



window.opacity = 1;

$(document).on("scrollstart", function(){
  $('#output').html("scrolling");
  window.opacity = $("#linkd").css("opacity");
  $("#linkd").css("opacity", "0.1"); 
});
      
$(document).on("scrollstop",function(){
  $("#linkd").css("opacity", window.opacity);
  $('#output').html("stopped");
});

body {
  margin: 0;
  padding: 0;
  line-height: 1.5;
}
#output {
  width: 100%;
  height: 2em;
  background: #eee;
  position: fixed;
  top: 0;
  left: 0;
  font-weight: bold;
  text-align: center;
  line-height: 2;
}

#linkd {
  margin: 3.5em auto 2em auto;
  max-width: 40em;
}

<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div id="output"></div>
    <div id="linkd">
      
      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
      
      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
      
      <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Curabitur blandit tempus porttitor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
      
      <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      
      <p>Maecenas sed diam eget risus varius blandit sit amet non magna. Donec sed odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    </div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

试试这个:

添加超时后,您可以在用户停止滚动时检测到。 您必须设置超时并清除滚动事件正在运行时。

$(window).scroll(function() {
    $("#linkd").css("opacity", "0.1");
    //clear timeout on scrolling
    clearTimeout(function(){scrollTimer()});
    //start timeout when scrolling is finished
    var scrollTimer = setTimeout(function() {
        $("#linkd").css("opacity", "1");    
    }, 1000);
});

示例:https://jsfiddle.net/94d81wo4/

答案 2 :(得分:0)

您可以使用jQuery根据您在屏幕上的位置使内容淡入淡出。有关详细信息,请查看此链接:http://api.jquery.com/fadein/

s-expression

答案 3 :(得分:0)

这有助于您:

$(document).ready(function(){

    $(window).scroll(function(){

        $("#linkd").css({opacity:0.1}); 

        clearTimeout($.data(this,"timer"));

        $.data(this, 'timer', setTimeout(function() {

            $("#linkd").css({opacity:1});

            }, 500));
    })
})