使用 jQuery 将 CSS 应用于 div，仅当它出现在屏幕上时答案

【问题标题】：Apply CSS to a div using jQuery, only when it appears in the screen使用 jQuery 将 CSS 应用于 div，仅当它出现在屏幕上时
【发布时间】：2014-10-02 12:37:26
【问题描述】：

我有一个单页（滚动）html。我的 div（home 和 home2）看起来像下面的代码。两者的高度均为 100%。我想使用 jQuery 将一些 CSS 应用于第二个 div(home2)，只有当它在浏览器中对用户可见时。请建议我这样做的方法。

<div class="col-md-12 home" id="home">
    <div class="col-md-6 col-md-offset-3 menu2">
        <h1 class="home2head">Heading 1</h1>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>
<div class="col-md-12 home2" id="home2">
    <div class="col-md-6 menu2" id="menu2">
        <h1 class="home2head">Heading 1</h1>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>

我不知道如何正确使用 $(window).scrollTop()，如果它可以解决我的问题。

【问题讨论】：

我回答了一个类似的问题，在用户通过屏幕上的一个 div 后显示一个 div。可以申请为你做这项工作——stackoverflow.com/questions/25660289/…
你可以看看这个小插件：github.com/zeusdeux/isInViewport
"当它有焦点时" 和 "当它在浏览器中可见时。" 是两个非常不同的东西。焦点通常意味着选择或激活等动作。但是，对于可见性而言，情况并非如此。只是为了澄清任何混淆，您想将 CSS 用于这两者中的哪一个？
“当它在浏览器中可见时”@War10ck.. 我应该修改问题吗？
查看我为你做的演示。确保右下角的窗口的大小调整到页面内容的大约一行，即（使窗口变小，直到看到底部大约一行），然后滚动。您将看到第 1 页滚动屏幕，第 2 页变为蓝色。如果需要，您可以删除 (+300) 并稍微放大窗口以查看会发生什么。 -- jsfiddle.net/4xx2vcg3

标签： jquery html css

【解决方案1】：

也许你应该使用mousein和mouseleave，我认为因为你的div中有很多内容，所以focusin和focusout很难获得焦点，你也可以添加一些可见的检查或你想做的事情

http://jsfiddle.net/mmue2hcd/

HTML

<div class="col-md-12 home" id="home">
    <div class="col-md-6 col-md-offset-3 menu2">
         <h1 class="home2head">Heading 1</h1>

        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>
<div class="col-md-12 home2" id="home2">
    <div class="col-md-6 menu2" id="menu2">
         <h1 class="home2head">Heading 1</h1>

        <p>Some content will go here. Something about the hotel and its specialities.</p>
    </div>
</div>

Javascript/Jquery

$(document).ready(function () {

    $('#home2').mouseenter(function () {
        $(this).addClass('cssfocused');
    })

    $('#home2').mouseleave(function () {
        $(this).removeClass('cssfocused');
    });


});

CSS .cssfocused { 背景颜色：红色； }

【讨论】：

好主意，但有一个问题.. mouseenter 功能只有在鼠标悬停在 div 上时才会起作用.. 如果用户使用 navs 滚动到 div，该功能将不起作用..跨度>

【解决方案2】：

可以这样做：

$(document).on('scroll', function() {
    var $element = $(".elementClass");
    if (isScrolledIntoView($element))
        $element.addClass('someclass');
    else
        $element.removeClass('someclass');
})

然后检查它在窗口上的位置，如本文所述：https://stackoverflow.com/a/488073/2414886

示例： http://jsfiddle.net/dmv1cty5/3/

【讨论】：