Вопрос:

Jquery scroll event return to original

jquery

42 просмотра

4 ответа

19 Репутация автора

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

It changes the opacity when I scroll but how do I make it go back to its original opacity when user stops scrolling?

Автор: Lex Sha Источник Размещён: 22.08.2016 08:49

Ответы (4)


0 плюса

1076 Репутация автора

Try this:

With add a timeout you can detect that when user stops scrolling. You have to set a timeout and clear that while scroll event is working.

$(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);
});

Example: https://jsfiddle.net/94d81wo4/

Автор: Mohammad Reza Размещён: 22.08.2016 08:54

0 плюса

1415 Репутация автора

You can use jQuery to make the content fade in and fade out depending on your position on the screen. For more information check out this link: http://api.jquery.com/fadein/

$(window).scroll(function(){
       if($(window).scrollTop()<10){
             $("#linkd").fadeOut("fast");
       } else {
            $("#linkd").fadeIn("fast");
       }
    });​
Автор: AndrewLeonardi Размещён: 22.08.2016 08:54

0 плюса

10459 Репутация автора

This help you :

$(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));
    })
})
Автор: Ehsan Размещён: 22.08.2016 09:55

1 плюс

6542 Репутация автора

Решение

If you develop a mobile page you can use jQuery mobile library with build in events : scrollstart and scrollstop, and save the original opacity in the window.opacity location for later restore.

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>

Автор: MaxZoom Размещён: 23.08.2016 01:44
Вопросы из категории :
32x32