在滚动点后显示和隐藏div

Question

I am using this script to hide a div and show it when have scrolled past a certain point in the page. This is working fine, but when I scroll back up to the top, the div then stays visible. Could anyone help me with an amendment I can make to the code to hide the div again when scrolling back above the desired point?

Thanks, T

$(document).ready( function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
    if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
        $("#dvid").show(); //reached the desired point -- show div
    }
});
});

Answer 1

$(document).ready( function() {
    $("#dvid").hide(); //hide your div initially
    var topOfOthDiv = $("#othdiv").offset().top;
    $(window).scroll(function() {
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $("#dvid").show(); //reached the desired point -- show div
        }
        else{
            $("#dvid").hide(); //else above the desired point -- hide div
        }
    });
});

Answer 2

First, check the element visibility:

var rect = element.getBoundingClientRect();
var visible = Boolean(
    rect.top >= 0
    && rect.left >= 0
    && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
    && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
 );

Then bind event to revalidate visibility:

jQuery(window).bind('DOMContentLoaded load resize scroll', fn);
// fn - is your function to show/hide elements in accordance with previous statement

So, the final code would be:

$(document).ready( function() {
    var checkVisibility = function () {
        $("#dvid, #othdiv").each(function () {
            var rect = this.getBoundingClientRect(),
                visible = Boolean(
                    rect.top >= 0
                    && rect.left >= 0
                    && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
                    && rect.right <= (window.innerWidth || document.documentElement.clientWidth)
                 );
            $(this)[visible ? 'show' : 'hide']();
        });
    };
    //hide your divs initially
    $("#dvid, #othdiv").hide(); 
    jQuery(window).bind('DOMContentLoaded load resize scroll', checkVisibility);
});

Answer 3

$(document).ready( function() {
$("#dvid").hide(); //hide your div initially
var topOfOthDiv = $("#othdiv").offset().top;
$(window).scroll(function() {
    if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
        $("#dvid").show(); //reached the desired point -- show div
    } else {
        $("dvid").show(); //hide div
    }
});
});