Deze code werkend krijgen

Status
Niet open voor verdere reacties.
Y

yoeri10

Gebruiker
Lid geworden
28 mrt 2014
Berichten
30
Beste forum gebruikers,

Wie zou mij kunnen helpen deze code werkend te krijgen:

Code: 
 $(function(){
            $(window).scroll(function() {
            var scroll = getCurrentScroll();
                if ( scroll >= 100 ) {
                    $('.fixedSwitch').addClass('Fixed');
                } else {
                    $('.fixedSwitch').removeClass('Fixed');
   
                }
            });

Alvast dank.

Gr. Yoeri
 
Misschien handig om aan te geven waarom dit niet goed werkt :)
Wat gebeurd er wel, en wat niet?

Wat voor debug-opties heb je gebruikt?
 
Code: 
$(window).scroll(function() {      
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
        $(".fixedSwitch").addClass("Fixed");
    }
    else {
        $(".fixedSwitch").removeClass("Fixed");
    }
}

Werkt het zo wel?
 
Hij voegt de class niet toe aan de div.

De totale code:
Code: 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type='text/javascript' src='//code.jquery.com/jquery-2.1.0.js'></script>
  
  
  

  
  <style type='text/css'>
    	body {
		padding: 0;
		margin: 0;
	}
	.header {
		width: 100%;
		height: 75px;
		background: blue;
		display: block;
	}
	.search {
		width: 150px;
		height: 25px;
		background: green;
		position: absolute;
		top: 100px;
	}
	.container {
		display: block;
		height: 3000px;
	}
	
	.Fixed{
	position:fixed;
	top:0px;
  </style>
  





</head>
<body>
  <div class="header">
	
</div>
<div class="search">	
</div>

<script type='text/javascript'>
$(window).scroll(function() {      
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
        $(".search").addClass("Fixed");
    }
    else {
        $(".search").removeClass("Fixed");
    }
}

</script>

<div class="container">
test	
</div>
blablabla  
</body>


</html>

heb de elementen geïnspecteerd maar zie dat hij de fixed niet toepast.
 
Ik krijg in mijn console een error in het javascript gedeelte, je moet de functie wel juist afsluiten.

Daarnaast laad je eerst jQuery 1.4.2 in en vervolgens 2.1.0. Lijkt mij handiger om er één te kiezen ;)

Dit moet werken:
HTML: 
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Test</title>
  <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script>
  <style type="text/css">
	body {
		padding: 0;
		margin: 0;
	}
	.header {
		width: 100%;
		height: 75px;
		background: blue;
		display: block;
	}
	.search {
		width: 150px;
		height: 25px;
		background: green;
		position: absolute;
		top: 100px;
	}
	.container {
		display: block;
		height: 3000px;
	}
	
	.Fixed{
    	position:fixed;
    	top:0px;
	}
  </style>
</head>
<body>
    <div class="header"></div>
    <div class="search"></div>
    <div class="container">test</div>
    blablabla
    <script type='text/javascript'>
    $(window).scroll(function() {      
        var scroll = $(window).scrollTop();
        if (scroll >= 100) {
            $(".search").addClass("Fixed");
        }
        else {
            $(".search").removeClass("Fixed");
        }
    });
    </script>
</body>
</html>

Ook zou ik de klasse-namen van CSS consistent houden, dus alles kleine letters of alles met een hoofdletter.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan