我没有时间给你写这个,伙计,但看起来你应该:
英雄区,内有你的标志。
位置:固定;菜单样式,您将菜单放在哪里,搜索。。。默认情况下,您将隐藏此内容。
在这里,您可以使用漂亮的“检查视图中是否存在”jQuery功能。在那里你可以检查你的英雄部分是否在视野之内。正确-。隐藏()菜单部分。错误-。show()菜单部分。
然后将“检查是否在视图中”功能置于“滚动”功能中,以便在用户上下移动时刷新。
下面是一个有用的文档(这是从另一个genius那里获得的,我只是<;3并根据自己的喜好对代码进行了一些修改):
(function($) {
//CHECK SCROLLED INTO VIEW UTIL
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
//END CHECK SCROLLED INTO VIEW UTIL
//USING THE ELEMENT IN VIEW UTIL
//this function tells what to do do when the element is or isnt in view.
//var inView = Utils.isElementInView(el, false); Where FALSE means the element doesnt need to be completely in view / TRUE would mean the element needs to be completely in view
function IsEInView(el) {
var inView = Utils.isElementInView(el, false);
if(inView) {
//console.log(\'in view\');
} else {
//console.log(\'not in view\');
}
};
//Check to make sure the element you want to be sure is visible is present on the page
var variableOfYourElement = $(\'#variableOfYourElement\');
//if it is on this page run the function that checks to see if it is partially or fully in view
if( variableOfYourElement.length ) {
//run function on page load
IsEInView(variableOfYourElement);
//run function if the element scrolls into view
$(window).scroll(function(){
IsEInView(variableOfYourElement);
});
}
//END USING THE ELEMENT IN VIEW UTIL
})(jQuery);