Display the div element as soon as a specific point on the page is exceeded

Question

Display the div element as soon as a specific point on the page is exceeded

I'm feeling a bit lost on this one. Is there a trick to causing a div to transition from display:none (or something comparable) once a specific div on the page has been scrolled beyond?

javascript jquery css html show

Answer 1

Answer №1

To start, assign an ID to your div, such as dvid. Then, assume the other div (the one you want to detect scrolling after) has the ID othdiv. You can then try this code snippet:

$(document).ready( function() {
    $("#dvid").hide(); //begin by hiding your div
    var topOfOthDiv = $("#othdiv").offset().top;
    $(window).scroll(function() {
        if($(window).scrollTop() > topOfOthDiv) { //have you scrolled past the other div?
            $("#dvid").show(); //once you reach the specified point, show the div
        }
    });
});

Check out a small jsFiddle demonstration here: link to demo.

Answer 2

To start, assign an ID to your div, such as dvid. Then, assume the other div (the one you want to detect scrolling after) has the ID othdiv. You can then try this code snippet:

$(document).ready( function() {
    $("#dvid").hide(); //begin by hiding your div
    var topOfOthDiv = $("#othdiv").offset().top;
    $(window).scroll(function() {
        if($(window).scrollTop() > topOfOthDiv) { //have you scrolled past the other div?
            $("#dvid").show(); //once you reach the specified point, show the div
        }
    });
});

Check out a small jsFiddle demonstration here: link to demo.

Answer 3

Answer №2

To trigger a function when the window is scrolled, you can retrieve the current scroll position and the distance of a specific element from the top of the page. Based on this information, you can choose to show or hide your desired element dynamically.

window.onscroll = function (oEvent) {
  var mydivpos = document.getElementById("mydiv").offsetTop;
  var scrollPos = document.getElementsByTagName("body")[0].scrollTop;

  if(scrollPos >= mydivpos)
    document.getElementById("noshow").className = "";
  else
    document.getElementById("noshow").className = "hidden";
};

Check out the live demo here

Answer 4

To trigger a function when the window is scrolled, you can retrieve the current scroll position and the distance of a specific element from the top of the page. Based on this information, you can choose to show or hide your desired element dynamically.

window.onscroll = function (oEvent) {
  var mydivpos = document.getElementById("mydiv").offsetTop;
  var scrollPos = document.getElementsByTagName("body")[0].scrollTop;

  if(scrollPos >= mydivpos)
    document.getElementById("noshow").className = "";
  else
    document.getElementById("noshow").className = "hidden";
};

Check out the live demo here

Answer 5

Answer №3

SCROLLBAR FUNCTIONALITY AND WINDOW SCROLL POSITION

In my exploration, I have found that utilizing functions like the one mentioned above, (there are numerous similar examples on this platform - all proven to be effective), only works effectively when scrollbars are visible and in use.

If you attempt to implement such functionality while aiming for a minimalist design with no scrollbars, like the concept discussed at this thread, then using $(window).scrollTop() will not yield the desired outcome.

While this may seem like a basic programming principle, I wanted to share this insight with fellow beginners, as it took me some time to realize this limitation.

If anyone has suggestions on overcoming this challenge or further insights to share, please feel free to respond. I had to resort to alternate methods like show/hide onmouseover/mouseleave as seen here

May your programming journey be long and prosperous, CollyG.

Answer 6

SCROLLBAR FUNCTIONALITY AND WINDOW SCROLL POSITION

In my exploration, I have found that utilizing functions like the one mentioned above, (there are numerous similar examples on this platform - all proven to be effective), only works effectively when scrollbars are visible and in use.

If you attempt to implement such functionality while aiming for a minimalist design with no scrollbars, like the concept discussed at this thread, then using $(window).scrollTop() will not yield the desired outcome.

While this may seem like a basic programming principle, I wanted to share this insight with fellow beginners, as it took me some time to realize this limitation.

If anyone has suggestions on overcoming this challenge or further insights to share, please feel free to respond. I had to resort to alternate methods like show/hide onmouseover/mouseleave as seen here

May your programming journey be long and prosperous, CollyG.

Answer 7

Answer №4

Check out this functioning demo.

The script uses jQuery to monitor scrolling and show or hide a hidden element based on the scroll position:

$(function(){
    var hiddenElement = $('.hidden');
    var topPosition = hiddenElement.offset().top;
    var windowObj = $(window);
    
    windowObj.scroll(function(){
        var scrollTopPos = windowObj.scrollTop();
        
        if(scrollTopPos >= topPosition){
            hiddenElement.show(2000);
        } else {
            hiddenElement.hide(2000);
        }
    });
});

Answer 8

Check out this functioning demo.

The script uses jQuery to monitor scrolling and show or hide a hidden element based on the scroll position:

$(function(){
    var hiddenElement = $('.hidden');
    var topPosition = hiddenElement.offset().top;
    var windowObj = $(window);
    
    windowObj.scroll(function(){
        var scrollTopPos = windowObj.scrollTop();
        
        if(scrollTopPos >= topPosition){
            hiddenElement.show(2000);
        } else {
            hiddenElement.hide(2000);
        }
    });
});

Answer 9

Answer №5

Adapted from @Abody97's solution to reveal a div after it has been scrolled past

http://jsfiddle.net/nickaknudson/f72vg/

$(document).ready( function() {
    $("#div_to_show").hide(); //initially hide the targeted div
    $(window).scroll(function() {
        // reveal when top of div is passed while scrolling
        if($(body).scrollTop() >= $("#div_to_scroll_past").offset().top) {
            $("#div_to_show").show(); //display the div once desired point is reached
        }
    });
});

OR reveal when the bottom of the div is scrolled beyond

$(document).ready( function() {
    $("#div_to_show").hide(); //initially hide the targeted div
    $(window).scroll(function() {
        // reveal when bottom of div is scrolled past
        if($(body).scrollTop() >= ( $("#div_to_scroll_past").offset().top + $("#div_to_scroll_past").outerHeight() )) {
            $("#div_to_show").show(); //display the div once desired point is reached
        }
    });
});

ADDITIONAL INFORMATION

Answer 10

Adapted from @Abody97's solution to reveal a div after it has been scrolled past

http://jsfiddle.net/nickaknudson/f72vg/

$(document).ready( function() {
    $("#div_to_show").hide(); //initially hide the targeted div
    $(window).scroll(function() {
        // reveal when top of div is passed while scrolling
        if($(body).scrollTop() >= $("#div_to_scroll_past").offset().top) {
            $("#div_to_show").show(); //display the div once desired point is reached
        }
    });
});

OR reveal when the bottom of the div is scrolled beyond

$(document).ready( function() {
    $("#div_to_show").hide(); //initially hide the targeted div
    $(window).scroll(function() {
        // reveal when bottom of div is scrolled past
        if($(body).scrollTop() >= ( $("#div_to_scroll_past").offset().top + $("#div_to_scroll_past").outerHeight() )) {
            $("#div_to_show").show(); //display the div once desired point is reached
        }
    });
});

ADDITIONAL INFORMATION

Answer 11

Answer №6

To achieve this, an effective approach would involve utilizing jQuery along with a function resembling the following.

var scrollPosition = 750; // Specify the vertical position at which the event triggers.
$(window).scroll(function(e) {
    if (window.pageYOffset >= scrollPosition) {
        triggerEvent();
    }
});

function triggerEvent() {
    // Implement the necessary logic to accomplish your objective here.
};

Answer 12

To achieve this, an effective approach would involve utilizing jQuery along with a function resembling the following.

var scrollPosition = 750; // Specify the vertical position at which the event triggers.
$(window).scroll(function(e) {
    if (window.pageYOffset >= scrollPosition) {
        triggerEvent();
    }
});

function triggerEvent() {
    // Implement the necessary logic to accomplish your objective here.
};

Display the div element as soon as a specific point on the page is exceeded

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

`Placing the Div in the correct location`

Combine the filter and orderBy components in AngularJS ng-options for a customized select dropdown menu

Radio buttons with multiple levels

Is there a way to transform a Base64 image into a specific file type?

What is the best way to find all documents based on a particular field in MongoDB?

Tips for transferring variable values from HTML to Angular

The condition in a Typescript function that checks for strings will never evaluate to true

Maximum size limitation for JSON parameters

Issue with Cufon jQuery accordion functionality

Effortless Ways to Automatically Accept SSL Certificates in Chrome

Having trouble with Angular2's Maximum Call Stack Exceeded error when trying to display images?

Creating a PDF report from a JSP page: Step-by-step guide

Displaying a carousel using CSS

I am attempting to use ajax to navigate to the next page, but I am encountering some issues with

Hiding icons in a jquery datatable's table

Problem with responsive design on iPhone

Displaying a CSS span element as the topmost layer

Strange CSS distortion - Surprising border-bottom setting when hovering

clear form input upon click event in AngularJS

Change the height of a division element after a script has been loaded