Show/Hide div with scroll

Question

I know the title isn't the most descriptive and there are many more topics with similar questions like this, but I couldn't find any answers. In fact, I got this far thanks to you guys so, here's what I'm trying to do.

I have a DIV that I want to show when the page is scrolled to a certain position (trigger), marked by #othdiv. This DIV disappears when you scroll further down to the next position (trigger) marked as #othdiv2.

This feels like it's a very simple solution but I just can't figure it out. I have tried conditional if statements, duplicating codes, removing lines, new variables... sigh... please help.

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

Current code sample: http://jsfiddle.net/DnJ2z/124/

Bottom line: I'm trying to do something similar to this: http://mailchimp.com/2012/ (notice the titles [the app, support, operations, etc])

You guys are awesome! Now, if I could abuse of your kindness: How would I add a 'buffer' to the topOfthDiv. Meaning, right now the div hides/shows when the scroll touches the div. How can I do it so that it toggles only after, for example, 200px AFTER scrolling past the div. Does that make sense? — coes, May 30 '13 at 23:54
Aha, I added a `position:relative;top:200px;` to othdiv, and problem solved. Thanks! — coes, May 31 '13 at 00:05

apaul · Answer 1 · 2013-05-28T00:29:14.850

Try using && as in: if (this and that){do something} else{don't}

Working Example

$(document).ready(function () {
    var topOfOthDiv = $("#othdiv").offset().top;
    var topOfOthDiv2 = $("#othdiv2").offset().top;
    $(window).scroll(function () {
        if ($(window).scrollTop() > topOfOthDiv && $(window).scrollTop() < topOfOthDiv2) {
            $("#dvid").show();
        } else {
            $("#dvid").hide();
        }
    });
});

For a much better explanation of logical operators check out: Logical Operators MDN

score 1 · Answer 2 · answered May 27 '13 at 23:32

I was playing with your fiddle and manage to get it working. Check if it's what you want:

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

Show/Hide div with scroll

2 Answers2

Linked