Question

我的html代码中有一段纯文本在div中。 div的课程是＆＃39; intro＆＃39;。

在我的CSS中，我有两个类用于这段文字：

.intro {
width: 100%;
margin-top: 3%;
display: none;
}

.introalt { 
 width: 100%;
margin-top: 3%;
display: block;
}

在我的脚本中，我有以下代码，因为我想将div的类改为＆＃39; introalt＆＃39;一旦我滚动了一下。原谅如果我在这里犯了新手的错误，我不习惯使用脚本。

$(function() {
var div = $(".intro");
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll >= 100) {
        div.removeClass('intro').addClass("introalt");
    }
   });
});

编辑：将codepen放在这里：View codepen

Answer 1

你需要把'inleidingalt＆＃39; addClass（）中的类而不是＆＃39; introalt＆＃39;

Answer 2

您的HTML不存在任何带有class =＆＃39; inleding＆＃39;的元素。

因此将其更改为var div = $(".intro");

然后你忘了添加Jquery lib。

修正上述问题后，您的代码就可以运行。

我分叉你的代码，check this。

编辑：为了很好地显示渲染结果，我确定了div的位置。您可以在项目中删除它。（但我在codepen中没有position:fixed。）

＆＃13;

$(function() {
    var div = $("#showup");
    $(window).scroll( function() {    
        var scroll = $(window).scrollTop();
        if (scroll >= 100) {
            div.removeClass('intro').addClass("introalt");
        }
        else {
            div.removeClass('introalt').addClass("intro");
        }
    });
});

＆＃13;

@charset "UTF-8";
/* CSS Document */

body {
background-color:#f4f4f4;
margin: 0;
font-family: 'Montserrat';
}

.navbar {
    z-index: 50;
    height: 3em;
    position: fixed;
    width: 100%;
    background: black;
}

.navbar ul {
    color: white;
    list-style-type: none; 
    margin-right: 7.5%;
    display: inline-block;
    float: right;
}

.navbar li {
    color: grey;
    margin-left: 2em;
    float: right;
}

li:hover {
  color: white;
}

.navbar img {
    margin-top: 0.6em;
    margin-left: 7.5%;
    height: 55%;
    display: inline-block;
    }

#huidig {
    color: white;
    border-bottom: 2px solid #26c181;
}

h1.naam {
    display: inline;
    color: white;
    font-size: 1.7em;
    font-weight: 500;
    }

.header {
    width: 100%;
    text-align: center;
}



.header h1{
    text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.65);
    width: 100%;
    text-align: center;
    position: absolute;
    margin-top: 2em;
    top: 3em;
    color: white;
    z-index: 1;
    font-size: 2.5em;
}

.header p {
    text-shadow: 2px 2px 3px rgba(150, 150, 150, 0.65);
    font-weight: 300;
    width: 100%;
    margin-top: 3em;
    text-align: center;
    position: absolute;
    top: 5.3em;
    color: white;
    z-index: 1;
    font-size: 2em;
}

.header img {
    filter: brightness(80%);
    z-index: -10;
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: 40em;

}

.intro {
    width: 100%;
    margin-top: 3%;
    display: none;
}

.introalt { 
   width: 100%;
   margin-top: 3%;
   display: block;
   position:fixed;
   top:50px;
   left:10px;
}


.intro h1 {
    font-size: 3.2em;
    margin-top: 0.2em;
    text-align: center;
    color: #26c181;
}

.intro p {
    font-size: 1.5em;
    text-align: center;
    margin-top: -1em
}

.lijn {
    top: 0;
    left: 50%;
    position: relative;
    border-left: 4px solid #26c181;
    height: 15em;
    margin-top: 4em;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600|Roboto+Slab:300,400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css1.css">
    <script src="/script.js"></script>
    
<title>Thoun</title>
</head>

<body>

	<div class="navbar">
            <img src="./img/thoun_logo.png" alt="Logo" border="0">
        <h1 class="naam">THOUN</h1>
        <ul>
            <li>Over ons</li>
            <li>Bedrijven</li>
            <li>Cases</li>
            <li>Levensstijl</li>
            <li>Locaties</li>
            <li id="huidig">Home</li>
        </ul>
    </div>
	
<div class ="header">
    <img src="https://image.ibb.co/mT1nV7/foto3.jpg" alt="foto3" border="0">
    <h1> Waar heb je altijd al willen wonen?</h1>
    <p> Iedereen wil op een droomlocatie wonen,<br> maar vaak blijft het bij een droom.<br><br>
Tijd om wakker te worden.</p>
    
 </div>
    
    <div class="lijn"></div>
    
<div class="intro" id="showup">
    <h1>Maak kennis met tiny house</h1>
    <p> Tegenwoordig moet alles maar groter, sneller, en beter. <br>
Iedereen wil in de hipste hotspots wonen, midden in de grootste en drukste steden.<br>
Voor de mensen die hier geen zin meer in hebben, is er nu de tiny house.<br> Wil je wonen in de bergen, naast een prachtig meer? <br><br><strong> Geen probleem, alles is mogelijk.</strong></p>
 </div>
	
    <div class="lijn"></div>
    
    
    
    
    
</body>
    
</html>

＆＃13;

Answer 3

尝试在滚动功能中记录一些虚拟文本的控制台，只是为了检查滚动功能是否正常工作，如果不使用下面的东西它总是我使用和工作，如果它没有切换window.scroll到body.scroll你的页面可能有一些奇怪的溢出

jQuery(document).ready(function($){
  $(window).scroll(function(){
    //logic here
  });
});

Div类不会改变滚动

3 个答案: