Jquery Scroll Show Hidden Content

jQuery scroll show hidden content

I have created a very quick example, it's not optimised by does the job:

http://jsfiddle.net/gRzPF/2/

JQuery Hide/Show on Scroll down

If you to hide the box when you reach the bottom of the page, you javascript should be as follows:

JAVASCRIPT:

$(document).ready(function() {
   $(document).on("scroll", function(){
     if ( window.scrollMaxY == window.scrollY ) {
        $("#box").hide();
     }
   })
});

HTML:

<div id="box">
  <div>Chamber 1</div>
  <div>Chamber 2</div>
  <div>Chamber 3</div>
</div>

Hide contents when page is scrolling down in jquery

Missing ( , ) around ($(window).scrollTop() + $(window).height() > $(document).height() - 100) at if conditions

$(document).ready(function() {  var footer = $('.footer-fix');  $(window).scroll(function() {    if (($(window).scrollTop() + $(window).height() > $(document).height() - 100)         && footer.is(':visible')) {      footer.stop().fadeOut(300);    } else if (($(window).scrollTop() < $(document).height() - 100)                && footer.is(':hidden')) {      footer.stop().fadeIn(300);    }  });});

body {  height: 520px;}.footer-fix {  background: rgba(255, 255, 255, 0.6);  display: block;  position: fixed;  bottom: 0;  z-index: 999;  width: 100%;  padding: 12px;  border-top: 1px solid #fff;  box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="footer-fix">  <p>This is its contents......</p></div>

jQuery: Hide element immediately on scroll down

If I understood, you want to disappear the element when you start scrolling and when reteurn to the top, appears again, so I would try to do:

$(window).scroll(function() {

    if($(this).scrollTop() > 0) {
        $element.fadeOut(1000);
    } else {
        $element.fadeIn(1000);
    }
});

Is that what you need?

Check it here: http://jsfiddle.net/benjasHu/4uj50cg3/1/

jQuery show hidden content, then auto scroll to the middle of the content

what about something like this?

jQuery('.open-content').slideToggle(1000, function(){
   var offset = jQuery('.open-content').offset();
   var y = offset.top + jQuery('.open-content').height();
   var wheight = $(window).height()
   var scroll = y - wheight;
   $(document).animate({scrollTop:scroll}, 500);
});

JQuery - Hide on Scroll Down, Partially Show on Scroll Up, Fully Show when at Top

Your lastScrollTop variable gets set to zero every time you scroll the window. You'll need to put that variable outside your scroll event.

Then, at the end of your scroll function, set lastScrollTop to be the value of st for the current call. That way lastScrollTop will be available for the next time the scroll event is called.

Here is a working example:

var lastScrollTop = 0;$(window).scroll(function (event) {        var st = $(this).scrollTop();        if (st > 0) {        if (st > lastScrollTop) {            // downscroll code            $('.a').removeClass('state-down');            $('.a').removeClass('state-partially');            $('.a').addClass('state-up')        } else {            // uproll code            $('.a').removeClass('state-down');            $('.a').removeClass('state-up');            $('.a').addClass('state-partially')        }    } else {        $('.a').removeClass('state-up');        $('.a').removeClass('state-partially');        $('.a').addClass('state-down')    }    lastScrollTop = st;});

body {    height: 2000px;}.a {    height: 300px;    width: 300px;    display: block;    background-color: green;    position: fixed;}.state-down {    top: 0px;}.state-partially {    top: -150px;}.state-up {    top: -300px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><div>    <div class="a">A</div></div>

---

Related Topics