Я надеюсь воссоздавать эффект, используемый на этом сайте: http://www.brizk.com/
Сайт использует одну большую страницу, которая прокручивает вниз. Как Вы прокручиваете вниз и передаете различные разделы навигация меню левому классу CSS изменений к "текущему", поскольку соответствующее отделение входит в представление.
Я предполагаю, что это может быть сделано с jQuery с помощью $ (окно) .height ();
Я довольно плохо знаком с jQuery и что я хочу записать, что-то вроде этого (в терминах laymans):
... и повторитесь для 4 различных отделений содержания.
Может любой указывать на меня в правильном направлении..?Спасибо.
Я не смотрел на пример кода (интереснее бросить вызов самому себе: 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:
<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>
Отлично, спасибо, это помогло мне понять отношения между окном и ссылками, но я не хотел использовать конкретную высоту в пикселях, а вместо этого относился к 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");
}
}
Это только часть кода, и он также управляет логотипом, который появляется справа, но меня интересуют (и сбивают с толку) переменные позиция прокрутки и sectionheight , которые должны позволять меню изменять класс в зависимости от того, находится ли раздел в поле зрения.