当div＃滚动到视图中时，jQuery在导航时改变css
我想重新创建本网站使用的效果： http ： //www.brizk.com/
该网站使用一个向下滚动的大页面。 当您向下滚动并传递不同的部分时，左侧的菜单导航将css类更改为“当前”，因为相应的div进入视图。
我认为这可以使用jQuery使用$（window）.height（）;
我是jQuery的新手，我想写的是这样的（用非专业术语）：
- 获取浏览器窗口的高度 – 如果div＃content1从顶部100px和/或从底部更改菜单200px a＃link1到’.current’ – 否则从所有菜单中删除.current链接
…并重复4个不同的内容div。
任何人都可以指出我正确的方向..？ 谢谢。
我没有看代码示例（挑战自己更有趣：P）但是这就是我要做的 – 演示在这里 。
我保存了每个元素块的位置以最小化DOM调用的数量，然后只搜索数组。 帮助您了解一些变量。
$(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 脚本：
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'); } }); }); });
你可以使用$(window).scrollTop(); 知道你从最顶端走了多远。
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：
HTML：
很好，谢谢，这有助于我理解窗口链接之间的关系，但我不想使用特定的像素高度，而是涉及保存每个链接的内容的div。 我展示的原始网站使用以下内容：
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"); } }
现在，这只是代码的一部分，它还控制右边的徽标，但感兴趣（和混淆）我的部分是变量scrollposition和sectionheight ，必须使菜单根据是否或更改类不是该部分在视野中。