CODEWITHSUNDEEP
javascriptjquery
DarrenLee
DarrenLee

Reputation: 137

Hide div on scroll , show div on stop

I would like to show the top div on stop scroll and hide it when a user scrolls. I have the code working in the reverse, can someone work out how to reverse it so that the div shows on stop scroll and hides when the user scrolls.

$(window).scroll(function() {
  $('top').stop(true, true).show().fadeOut('fast');
});
top {
  position: fixed;
  background: #000;
  color: #eee;
  right: 0;
  top: 0;
  padding: 10px;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<top>Show me on scroll</top>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

Upvotes: 2

Views: 106

Answers (2)

user6748331
user6748331

Reputation:

Use debounce function from underscore, or write own debounce function. Try this live demo. Is simple and IMO it provides best user experience:

var $hideMe = $('#imHiddenDuringScroll')

var hideIt = _ => {
  $hideMe.fadeOut('fast')
  showItLazy()
}
var showItLazy = _.debounce(_ => {
  $hideMe.fadeIn('fast')
}, 350)

$(window).scroll(hideIt)
#imHiddenDuringScroll {
  position: fixed;
  background: #000;
  color: #eee;
  right: 0;
  top: 0;
  padding: 10px;
}
#longScrollableText {
  width: 270px;
}
<script src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/underscore-min.js"></script>

<div id="imHiddenDuringScroll">I am hidden during scroll</div>
<div id="longScrollableText">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. uis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit met, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in rehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia        deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur dipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim eniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo onsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, unt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Upvotes: 0

Ivan Minakov
Ivan Minakov

Reputation: 1442

Try this:

 $(window).scroll(function() {
      $('top').stop(true, true).hide().fadeIn('fast');
    });

and css:

top {
  position: fixed;
  background: #000;
  color: #eee;
  right: 0;
  top: 0;
  padding: 10px;
  display: block;
}

fiddle

Upvotes: 2

Related Questions