Делать div-шоу, когда проходит определенная точка на странице

Ответ 1

Сначала укажите ваш div идентификатор, например dvid, и предположим, что другой div (который вы хотите определить прокрутку после) имеет идентификатор othdiv. Затем вы можете сделать что-то вроде этого:

$(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
        }
    });
});

Маленькая маленькая jsFiddle demo: небольшая ссылка.

Ответ 2

В окне onscroll найдите текущую позицию прокрутки, а также позицию div вверху страницы и соответственно отобразите/скройте свой элемент.

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";
};

Демо

Ответ 3

SCROLLBARS и $(window).scrollTop() "

То, что я обнаружил, заключается в том, что вызов такой функциональности, как в приведенном выше решении, есть много других примеров этого на этом форуме, которые все работают хорошо) только успешно, когда полосы прокрутки действительно видны и работают.

Если (как я, пожалуй, глупо пытался), вы хотите реализовать такую ​​функциональность, и вы также хотите, чтобы мы сказали, чтобы реализовать минималистский "чистый экран", свободный от полос прокрутки, например, это обсуждение, тогда $(window).scrollTop() не будет работать.

Это может быть фундаментальное программирование, но я подумал, что предлагаю руководителям любых новичков-новичков, поскольку я долго размышлял об этом.

Если кто-то может предложить некоторые советы о том, как преодолеть это или немного более глубокое понимание, не стесняйтесь отвечать, поскольку мне приходилось прибегать к показу/скрытию onmouseover/mouseleave вместо здесь

Live long и программа, CollyG.

Ответ 4

Модификация ответа @Abody97, чтобы показать, как прокручивается div

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

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

ИЛИ после прокрутки нижней части div

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

Ресурсы

• http://api.jquery.com/scrollTop/
• http://api.jquery.com/outerHeight/
• http://api.jquery.com/offset/

Ответ 5

Вот рабочая скрипка

jQuery

$(function(){
    var d = $('.hidden');
    var dPosTop = d.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= dPosTop){
          d.show(2000);
        }
      else{
        d.hide(2000);
      }
    });

});

Ответ 6

Самый простой способ сделать это - использовать jQuery с такой функцией.

var eventPosition = 550; // This is the height position you want the event to fire on.
$(window).scroll(function(e) {
    if (window.screenY >= eventPosition) {
        fireEvent();
    }
});

function fireEvent() {
    // Add logic here to complete what you're trying to do.
};