【发布时间】：2016-08-31 07:07:22
【问题描述】：
当有人到达 jquery 中的 div/部分时，我想更改菜单背景 三部分工作正常，但之后我的代码无法正常工作，我不知道为什么，两天后它吸了我的血，请在这里解决我的问题@ 987654321@
这是我的 jQuery 代码
var cul_home = $("#home").offset().top;
var cul_culture = $("#culture").offset().top;
var cul_work = $("#work").offset().top;
var cul_services = $("#services").offset().top;
var cul_careers = $("#careers").offset().top;
var cul_contactus= $("#contactus").offset().top;
var cul_locations= $("#locations").offset().top
var $topscrol = $(window).scroll(function(){
if ($topscrol.scrollTop() > cul_home)
{
$('#menu-item-1726').addClass('cltbck');//home
$('#menu-item-1715').removeClass('cltbck');//culture
$('#menu-item-1717').removeClass('worbck');//work
$('#menu-item-1718').removeClass('serbck');//servicess
$('#menu-item-1719').removeClass('cerbck');//careers
$('#menu-item-1720').removeClass('conbck');//contactus
$('#menu-item-1721').removeClass('locbck');//locations
}
else
{
$('#menu-item-1726').removeClass('cltbck');//home
}
if($topscrol.scrollTop() > cul_culture)
{
$('#menu-item-1726').removeClass('cltbck');//home
$('#menu-item-1715').addClass('cltbck');//culture
$('#menu-item-1717').removeClass('worbck');//work
$('#menu-item-1718').removeClass('serbck');//servicess
$('#menu-item-1719').removeClass('cerbck');//careers
$('#menu-item-1720').removeClass('conbck');//contactus
$('#menu-item-1721').removeClass('locbck');//locations
}
else
{
$('#menu-item-1715').removeClass('cltbck');//home
}
if($topscrol.scrollTop() > cul_work)
{
$('#menu-item-1726').removeClass('cltbck');//home
$('#menu-item-1715').removeClass('cltbck');//culture
$('#menu-item-1717').addClass('worbck');//work
$('#menu-item-1718').removeClass('serbck');//servicess
$('#menu-item-1719').removeClass('cerbck');//careers
$('#menu-item-1720').removeClass('conbck');//contactus
$('#menu-item-1721').removeClass('locbck');//locations
}
else
{
$('#menu-item-1717').removeClass('worbck');//home
}
if($topscrol.scrollTop() > cul_services)
{
$('#menu-item-1726').removeClass('cltbck');//home
$('#menu-item-1715').removeClass('cltbck');//culture
$('#menu-item-1717').removeClass('worbck');//work
$('#menu-item-1718').addClass('serbck');//servicess
$('#menu-item-1719').removeClass('cerbck');//careers
$('#menu-item-1720').removeClass('conbck');//contactus
$('#menu-item-1721').removeClass('locbck');//locations
}
else
{
$('#menu-item-1718').removeClass('serbck');//home
}
if($topscrol.scrollTop() > cul_careers)
{
$('#menu-item-1726').removeClass('cltbck');//home
$('#menu-item-1715').removeClass('cltbck');//culture
$('#menu-item-1717').removeClass('worbck');//work
$('#menu-item-1718').removeClass('serbck');//servicess
$('#menu-item-1719').addClass('cerbck');//careers
$('#menu-item-1720').removeClass('conbck');//contactus
$('#menu-item-1721').removeClass('locbck');//locations
}
else
{
$('#menu-item-1719').removeClass('cerbck');//home
}
if($topscrol.scrollTop() > cul_contactus)
{
$('#menu-item-1726').removeClass('cltbck');//home
$('#menu-item-1715').removeClass('cltbck');//culture
$('#menu-item-1717').removeClass('worbck');//work
$('#menu-item-1718').removeClass('serbck');//servicess
$('#menu-item-1719').removeClass('cerbck');//careers
$('#menu-item-1720').addClass('conbck');//contactus
$('#menu-item-1721').removeClass('locbck');//locations
}
else
{
$('#menu-item-1720').removeClass('conbck');//contactus
}
if($topscrol.scrollTop() > cul_locations)
{
$('#menu-item-1726').removeClass('cltbck');//home
$('#menu-item-1715').removeClass('cltbck');//culture
$('#menu-item-1717').removeClass('worbck');//work
$('#menu-item-1718').removeClass('serbck');//servicess
$('#menu-item-1719').removeClass('cerbck');//careers
$('#menu-item-1720').removeClass('conbck');//contactus
$('#menu-item-1721').addClass('locbck');//locations
}
else
{
$('#menu-item-1721').removeClass('locbck');//locations
}
});
【问题讨论】：
-
您想在滚动条上突出显示当前部分吗？
-
喜欢这个网站vaynermedia.com
-
要实现这一点，您必须根据屏幕高度设置部分高度，如您在 vaynermedia.com 中看到的所有部分都占据全屏高度。
-
这两天我一直在尝试解决这个问题，但我不知道为什么它不起作用你能解决这个问题或告诉我替代解决方案
-
@Komalkhan 1. 首先，打印调试的滚动位置：
console.log(); console.log( $("#home").offset().top + " " + cul_home); console.log( $("#culture").offset().top + " " + cul_culture); console.log( $("#work").offset().top + " " + cul_work); console.log( $("#services").offset().top + " " + cul_services); console.log( $("#careers").offset().top + " " + cul_careers); console.log( $("#contactus").offset().top + " " + cul_contactus); console.log( $("#locations").offset().top + " " + cul_locations); console.log( "****************"); console.log();
标签： jquery html css wordpress scrolltop