Using CSS and JavaScript to hide a div element

Question

Using CSS and JavaScript to hide a div element

In my one-page website, I have a fixed side navigation bar within a div that is initially hidden using the display:none property.

Is there a way to make this side nav appear when the user scrolls to a specific section of the page, like when reaching the #about div?

javascript jquery html css

Answer 1

Answer №1

To effectively determine if a user has scrolled to or past the div with an id of "about," you first need to capture the current vertical position (Y value) of the div.

// Cache the "about" div
var about = $('#about');
// Store the initial position of the "about" div on window load
var aboutPosition = about.position();

Next, you'll have to calculate how much the user has scrolled. The most efficient method I've found is to use a timer. While you could utilize the scroll event, it can be resource-intensive for the browser and using a timer is typically imperceptible to users.

// Set up a timer to repeatedly check every 10 milliseconds 
// with a callback function to process the logic
var checkScrollPos = window.setInterval("scrollTopLogic()", 10);

function scrollTopLogic() {
    // If the Y position of the "about" div is greater than or equal to 
    // the current window scroll position, take action
    if (aboutPosition.y >= $(window).scrollTop()) {
        $('nav').show();
        // Stop the timer since it's no longer necessary
        window.clearInterval(checkScrollPos);
    }
}

Answer 2

To effectively determine if a user has scrolled to or past the div with an id of "about," you first need to capture the current vertical position (Y value) of the div.

// Cache the "about" div
var about = $('#about');
// Store the initial position of the "about" div on window load
var aboutPosition = about.position();

Next, you'll have to calculate how much the user has scrolled. The most efficient method I've found is to use a timer. While you could utilize the scroll event, it can be resource-intensive for the browser and using a timer is typically imperceptible to users.

// Set up a timer to repeatedly check every 10 milliseconds 
// with a callback function to process the logic
var checkScrollPos = window.setInterval("scrollTopLogic()", 10);

function scrollTopLogic() {
    // If the Y position of the "about" div is greater than or equal to 
    // the current window scroll position, take action
    if (aboutPosition.y >= $(window).scrollTop()) {
        $('nav').show();
        // Stop the timer since it's no longer necessary
        window.clearInterval(checkScrollPos);
    }
}

Answer 3

Answer №2

To display the element, you can monitor the scroll event of the div using the following code snippet:

$("#div").on("scroll", function() {
   $("#item").fadeIn();
});

Answer 4

To display the element, you can monitor the scroll event of the div using the following code snippet:

$("#div").on("scroll", function() {
   $("#item").fadeIn();
});

Using CSS and JavaScript to hide a div element

Answer №1

Answer №2

Similar questions

Guide to setting up Gatsby CLI and Gatsby version 2

What is the best way to add a value to the value attribute of a div using JavaScript?

Fire an event in JavaScript from a different script file

Checkbox selection limitation feature not functioning correctly

Angular 5 and Bootstrap card with enhanced double-click functionality

Achieving a fixed 16:9 aspect ratio for the VLC web player: a detailed guide

Obtaining the scene's coordinates in Three.js

Tips for preventing the automatic insertion of tbody tag by Firefox?

Array containing two objects in a two-dimensional format

A more organized method for assigning Enter key presses

Datagrid in AngularJS does not update filters upon refresh

The toLowerCase method seems to be malfunctioning along with several other functions

Use the `string.replace()` method to swap out strings in a nested object with values from a separate file

The hover effect does not function on an SVG element when it is placed within an external file

Issues arise when attempting to use Stylus in conjunction with React

Guide on executing edit form alongside file upload

Pictures in Windows 7 have shifted to the left

Using the power of jQuery to send a Rails form for processing

jQuery - patience is required until all elements have completely faded away

Calculate the total cost for each row in a table by multiplying the quantity and price using jQuery, then display the result