Question

我知道这已被问了一千次，但我无法让这个工作。在页面滚动500px之后，我试图让它显示出来。我对javascript很新，所以我不确定我在做什么。任何帮助这项工作都会很棒！

$(window).scroll(function() {    
    // find the id with class 'active' and remove it
    $(".work-col-1-2").removeClass("visible");
    // get the amount the window has scrolled
    var scroll = $(window).scrollTop();
    // add the 'active' class to the correct id based on the scroll amount
    if (scroll <= 500) {
        $(".work-col-1-2").addClass("visible");
    }
});

.work-col-1-2 {
    position: fixed;
    right: 6%;
    top: 0;
    width: 25%;
    padding: 1%;
    margin: 0;
    display: inline-block;
    box-sizing: border-box;
    z-index: -1;
    visibility: hidden;
}

.work-col-1-2.visible {
    visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
    <div class="work-col-1-2">
        <p>Text here.</p>
    </div>
</div><!-- end of container div-->

Answer 1

可能你有改变

if (scroll <= 500) {
   $(".work-col-1-2").addClass("visible");
}

到

if (scroll >= 500) {
    $(".work-col-1-2").addClass("visible");
}

你也有2个脚本标签。删除一个。

Answer 2

你有两个班，.work-col-1-2和.work-col-1-2.visible 如果要添加名为visible的类，则只应使用名为visible的类。

.work-col-1-2 {
position: fixed;
right: 6%;
top: 0;
width: 25%;
padding: 1%;
margin: 0;
display: inline-block;
box-sizing: border-box;
z-index: -1;
visibility: hidden;
}

.visible {
visibility: visible;
}

您的代码很好但是正在查找类名为.work-col-1-2的对象，然后添加无法找到的可见类。因此，更改类的名称应该可以解决问题。

Answer 3

这是一个适合您的工作示例。你所有的选择都是错的。您必须将#用作id选择器，将.用作class选择器。

$(window).scroll(function() {    
    // find the id with class 'active' and remove it
    $("#work-col-1-2").removeClass("visible");
    // get the amount the window has scrolled
    var scroll = $(window).scrollTop();
    // add the 'active' class to the correct id based on the scroll amount
    if (scroll >= 500) {
        $("#work-col-1-2").addClass("visible");
    }
});

#work-col-1-2 {
    position: fixed;
    right: 6%;
    top: 0;
    width: 25%;
    padding: 1%;
    margin: 0;
    display: inline-block;
    box-sizing: border-box;
    z-index: -1;
    visibility: hidden;
}

#work-col-1-2.visible {
    visibility: visible;
}
#container{height:1000px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container">
    <div id="work-col-1-2">
        <p>Text here.</p>
    </div>
</div><!-- end of container div-->

Answer 4

更改html

id="work-col-1-2" to class="work-col-1-2"

如何在元素到达某一点后添加一个类？

4 个答案: