CODEWITHSUNDEEP
javascriptjquery
user2989731
user2989731

Reputation: 1359

Toggle div depending on positon on page

I have a single scrolling page with a menu tucked away at the side. I want to toggle menu depending on the position on the page. I've managed to check the position and hide/show the menu at the appropriate locations but this will only work on page load. I need to the menu to be constantly active and toggle itself as the user scrolls down the page. Is this possible with jquery/js? This is my code so far:

var nav = $(".nav-links").offset();
var about = $("#page-about").offset();
var location = $("#page-location").offset();
var amenities = $("#page-amenities").offset();
var art = $("#page-art").offset();
var availabilities = $("#page-availabilities").offset();
var contact = $("#page-contact").offset();

console.log("amenities position " + amenities.top);
console.log("nav position " + nav.top);

if (about.top < nav.top) {
    $('.nav-links').css("display", "none");
}

if (location.top < nav.top) {
    $('.nav-links').css("display", "none");
}

if (amenities.top < nav.top) {
    $('.nav-links').css("display", "block");
}

if (art.top < nav.top) {
    $('.nav-links').css("display", "none")
}

if (availabilities.top < nav.top) {
    $('.nav-links').css("display", "none")
}

if (contact.top < nav.top) {
    $('.nav-links').css("display", "block")
}

Upvotes: 0

Views: 36

Answers (2)

Bic
Bic

Reputation: 3134

You need to recheck the position each time the user scrolls. You can do this with an onScroll event

$(document).on('scroll', function () {
    // toggle code goes here
});

Upvotes: 1

Flinkman
Flinkman

Reputation: 398

You could use scrollSpy from Twitter.Bootstrap, or something similar:

http://getbootstrap.com/javascript/#scrollspy

Upvotes: 0

Related Questions