jQuery CSS auf Navigation zu ändern, wenn div # blättert in Sicht

Question

Ich suche den Effekt neu auf dieser Website verwendet: http://www.brizk.com/

Die Website verwendet eine große Seite, die nach unten scrollt. Wenn Sie nach unten scrollen und verschiedene Abschnitte passieren, ändert sich die css-Klasse in der Menünavigation auf der linken Seite in "current", wenn das entsprechende div angezeigt wird.

Ich nehme an, dies kann mit jQuery mit $ (window) .height();

Ich bin ziemlich neu in jQuery und was ich will ist, schreiben etwas wie folgt aus (in laymans Begriffe):

• Get Höhe des Browserfensters - wenn div # content1 100px von oben und/oder 200px von unten ändern Menü a # link1 zu '.Current' - sonst entfernen .Current aus allen Menüs eine Link

... und wiederholen Sie für 4 verschiedene Inhalte divs.

Kann mir jemand in die richtige Richtung zeigen ..? Danke.

Answer 1

Ich habe mir das Code-Beispiel nicht angesehen (es macht mehr Spaß, mich selbst herauszufordern: P), aber so würde ich es machen - demo here.

Ich speicherte die Position jedes Elementblocks, um die Anzahl der DOM-Aufrufe zu minimieren, und suchte dann durch das Array. Um Ihnen zu helfen, einige der Variablen zu verstehen.

$(window).height() // returns the viewport height 
$(document).height() // returns the height of the entire document 
$(window).scrollTop() // returns the Y position of the document that is at the top of the viewport 

Script:

var topRange  = 200, // measure from the top of the viewport to X pixels down 
    edgeMargin = 20, // margin above the top or margin from the end of the page 
    animationTime = 1200, // time in milliseconds 
    contentTop = []; 

$(document).ready(function(){ 

// Stop animated scroll if the user does something 
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(e){ 
    if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel'){ 
    $('html,body').stop(); 
    } 
}); 

// Set up content an array of locations 
$('#sidemenu').find('a').each(function(){ 
    contentTop.push($($(this).attr('href')).offset().top); 
}); 

// Animate menu scroll to content 
    $('#sidemenu').find('a').click(function(){ 
    var sel = this, 
     newTop = Math.min(contentTop[ $('#sidemenu a').index($(this)) ], $(document).height() - $(window).height()); // get content top or top position if at the document bottom 
    $('html,body').stop().animate({ 'scrollTop' : newTop }, animationTime, function(){ 
    window.location.hash = $(sel).attr('href'); 
    }); 
    return false; 
}); 

// adjust side menu 
$(window).scroll(function(){ 
    var winTop = $(window).scrollTop(), 
     bodyHt = $(document).height(), 
     vpHt = $(window).height() + edgeMargin; // viewport height + margin 
    $.each(contentTop, function(i,loc){ 
    if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt) >= bodyHt))){ 
    $('#sidemenu li') 
    .removeClass('selected') 
    .eq(i).addClass('selected'); 
    } 
    }); 
}); 

}); 

Answer 2

Sie können $(window).scrollTop(); verwenden, um zu wissen, wie weit Sie von der Spitze weg sind.

JS:

$(window).scroll(
    function() { 

     var top = 0; 
     top = $(window).scrollTop(); 

     if(top < 500){ 
     $("a[href='#top']").parent().addClass("current"); 
     $("a[href='#top']").parent().siblings().removeClass("current"); 
     } 

     if((top >= 500) && (top < 1000)){ 
     $("a[href='#work']").parent().addClass("current"); 
     $("a[href='#work']").parent().siblings().removeClass("current"); 
     }  

     if((top >= 1000) && (top < 1500)){  
     $("a[href='#blog']").parent().addClass("current"); 
     $("a[href='#blog']").parent().siblings().removeClass("current"); 
     } 

CSS:

<style type="text/css"> 
body{ 
height: 2000px; 
} 
div#nav{ 
position: fixed; 
top: 170px; 
z-index: 10; 
} 
#nav ul li{ 
display: block; 
margin: 0; 
padding: 0; 
background: #FFFFFF; 
} 
#nav ul li a{ 
backgroundColor: #FFFFFF; 
color: #C55500; 
} 
#nav ul li.current a{ 
background: none repeat scroll 0 0 #303E3F; 
color: #FFFFFF; 
} 
#nav ul li a{ 
-moz-border-radius: 5px 5px 5px 5px; 
display: block; 
line-height: 1; 
padding: 10px; 
text-align: right; 
text-decoration: none; 
width: 70px; 
} 

HTML:

<div id="nav"> 
    <ul> 
    <li><a title="" href="#top">Home</a></li> 
    <li><a title="" href="#work">Work</a></li> 
    <li><a href="#blog" title="">Blog</a></li> 

    </ul> 
</div> 

Answer 3

Nizza, Dank, dass Sie mir zu verstehen, die die Beziehungen zwischen dem Fenster der Links geholfen hat aber ich war nicht da nt, bestimmte Pixelhöhen zu verwenden, sondern beziehen sich stattdessen auf die divs, die den Inhalt für jede Verbindung enthalten. Der ursprüngliche Standort zeigte ich verwendet die folgende:

function animateMenuLogo(logo, menu) { 
    var scrollposition = $(window).scrollTop(); 
    var top = $("a[name='"+ menu +"']").offset().top; 
    var sectionheight = $("a[name='"+ menu +"']").next().outerHeight(); 

    if (((top-100) < scrollposition) && ((top+sectionheight-200) > scrollposition)) { 
     $(logo).fadeIn(500); 
     $("a[href='#"+ menu +"']").css({ backgroundColor: "#303e3f", color: "#ffffff" }); 
     $("a[href='#"+ menu +"']").parent().addClass("current"); 
    } else { 
     $(logo).fadeOut(500); 
     $("a[href='#"+ menu +"']").css("background-color","transparent"); 
     $("a[href='#"+ menu +"']").css("color","#717c7d");$("a[href='#"+ menu +"']").parent().removeClass("current"); 
    }  
} 

Nun, dies ist nur ein Teil des Codes und es steuert auch das Logo, das in auf der rechten Seite kommt, aber der Teil, der Interessen (und verwirrt) mich die Variablen scrollposition und sectionheight, die das Menü aktivieren muss, um die Klasse zu ändern, abhängig davon, ob der Abschnitt angezeigt wird oder nicht.