CODEWITHSUNDEEP
javascriptclassscroll
Dennis de Vries
Dennis de Vries

Reputation: 3

Div class not changing on scroll

I have a piece of plain text in my html code inside in a div. The div's class is 'intro'.

In my CSS, I have two classes for this piece of text:

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

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

In my script, I have the following code because I want to change the class of the div to 'introalt' once I have scrolled a bit. Forgive if I am making rookie mistakes here, I'm not used to working with scripts.

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

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

EDIT: Put the codepen up here: View codepen

Upvotes: 0

Views: 48

Answers (3)

Sphinx
Sphinx

Reputation: 10729

Your html doesn't exists any elements with class='inleding'.

so changed it to var div = $(".intro");

Then you forgot to add Jquery lib.

After fixed above issues, your codes works.

And I forked your codepen, check this.

Edit: To display the rendered result well, I mades the position of the div is fixed. You can removed it in your project. (But I didn't do position:fixed in codepen.)

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

Upvotes: 0

Jacob Kenyon
Jacob Kenyon

Reputation: 9

Try console logging some dummy text out in your scroll function just to check the scroll function is working if not use something like below it's always what i use and works if it doesnt switch window.scroll to body.scroll you may have some weird overflow on your page

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

Upvotes: 0

Kalleshwar Kalshetty
Kalleshwar Kalshetty

Reputation: 544

You need to put 'inleidingalt' class in addClass() instead of 'introalt'

Upvotes: 1

Related Questions