javascript 检查div是否在窗口中可见?

muk1a3rh  于 2023-01-19  发布在  Java
关注(0)|答案(6)|浏览(201)

我有一个固定的导航和使用滚动脚本一页的网站,非常类似于这个:http://www.ivanjevremovic.in.rs/live/temptation/single/orange/index-cycle-slider.html
我正在寻找的是一种方法来检查哪些部分是在窗口中可见的设置活动状态的导航时,使用浏览器滚动条,任何想法?

agyaoht7

agyaoht71#

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}

来源:Check if element is visible after scrolling

guz6ccqo

guz6ccqo2#

查看下面的lazyload插件:

http://plugins.jquery.com/files/jquery.lazyload.js__6.txt

以注解“返回项目相对于当前视图的状态”开始的部分检查元素在视口中是否可见。

cs7cruho

cs7cruho3#

如果您使用的是jQuery,只需尝试检查文档位置

$('html').position().top;

例如:

$(document).bind("scroll", checkLink);

function checkLink(){

   /* Position will checked out after 1 sec when user finish scrolling  */
   var s = setTimeout(function(){ 

     var docHeight = $('html').position().top;
     var allLinks = $('.navigation a');

     if ( docHeight < 0 && docHeight <= -1000 ) { 

        allLinks.removeClass('active');
        $('a.firstlink').addClass('active');

     } else 
     if ( docHeight < -1000 && docHeight <= -2000 ) { 

        allLinks.removeClass('active');
        $('a.secondlink').addClass('active');

     } else { /* .... */ }

   $(document).bind("scroll", checkLink);
   }, 1000);

  $(document).unbind('scroll');
}

但是你的例子中的人并没有坚持很长时间:)他们只是在点击时切换类

$('#navigation').localScroll();
    $('#navigation li a').click( function () {
        $('#navigation li a').removeClass("active");
        $(this).addClass("active");
    });
ccrfmcuu

ccrfmcuu4#

2022答案-您不必再为此使用jQuery

现在可以在IntersectionObserver中使用普通的javascript。
其他答案的问题在于它们重复了太多次。
例如,您可以这样:

var observer = new IntersectionObserver(function(entries) {
    if(entries[0].isIntersecting === true) {
        console.log('Element is in the window');
    } else {
        console.log("Element is not in the window"); 
    }
});

observer.observe(document.querySelector(".myObject"));
swvgeqrz

swvgeqrz5#

使用$('#element').offset().top;检测元件顶面。
$(window).scrollTop();以检测当前滚动位置。
$(window).height();来检测当前窗口高度。
在这些步骤之后,你实际上只需要一些简单的数学计算。

slwdgvem

slwdgvem6#

这里是你需要的所有变量...

var $myElt       = $('.myElement');      // whatever element you want to check
var $window      = $(window);            // the window jQuery element
var myTop        = $myElt.offset().top;  // the top (y) location of your element
var windowTop    = $window.scrollTop();           // the top of the window
var windowBottom = windowTop + $window.height();  // the bottom of the window

然后,为了确保您的元素在窗口的范围内...

if (myTop > windowTop && myTop < windowBottom) {
    // element is in the window
} else {
    // element is NOT in the window
    // maybe use this to scroll... 
    // $('html, body').animate({scrollTop: myTop}, 300);
}

jQuery参考:

相关问题