Javascript 容易在错误位置出现导航背景
当面板1的底部点击页面顶部时,我试图在滚动条上轻松地进出白色背景和底部边框。但是,动画发生在切换菜单内的导航上。我猜这是因为我的类“bg navfade”放置不正确 CSS: jQuery:Javascript 容易在错误位置出现导航背景,javascript,jquery,html,css,svg,Javascript,Jquery,Html,Css,Svg,当面板1的底部点击页面顶部时,我试图在滚动条上轻松地进出白色背景和底部边框。但是,动画发生在切换菜单内的导航上。我猜这是因为我的类“bg navfade”放置不正确 CSS: jQuery: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> /*navigation icon animation*/ var trigger
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*navigation icon animation*/
var trigger='X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger='X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger=='X')
{
$("#toggle-menu").toggleClass();
trigger='ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('.bg').addClass('show');
} else {
$('.bg').removeClass('show');
};
});
$('.scroll').on('click', function(e){
e.preventDefault()
$('html, body').animate({
scrollTop : $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
</script>
/*导航图标动画*/
var-trigger='X';
jQuery(文档).ready(函数(){
$(“#切换菜单”)。单击(函数(){
触发器='X';
$(this).toggleClass('menu-is-active')
});
/*单击导航外部以触发导航图标动画*/
$(文档)。单击(函数(){
如果(触发器=='X')
{
$(“#切换菜单”).toggleClass();
扳机‘火腿’;
}
});
$(“导航”)。单击(功能(e){
e、 停止传播();
返回false;
});
/*----/----导航图标动画*/
/*切换菜单*/
jQuery(“切换菜单”)。单击(函数(){
jQuery(“.nav”).slideToggle();
});
/*单击导航外部以关闭切换*/
$(文档)。单击(函数(){
$(“.nav”).hide();
});
$(“#切换菜单”)。单击(功能(e){
e、 停止传播();
返回false;
});
/*----/----切换菜单*/
/*导航背景淡入淡出*/
$(窗口)。滚动(函数(){
如果($(窗口).scrollTop()>100){
$('.bg').addClass('show');
}否则{
$('.bg').removeClass('show');
};
});
$('.scroll')。在('click',函数(e){
e、 预防默认值()
$('html,body')。设置动画({
scrollTop:$(this.hash).offset().top
}, 1500);
});
/*----/-----导航背景淡入淡出*/
});
HMTL:
想看更多吗?看看我的instagram李>
首先,您需要从HTML中删除.navfade
和.bg
类
将您的.bg
CSS更改为:
CSS
删除此Javascript
换成这个
dist
变量计算从页面顶部到panel 1部分末端的距离。这是添加.bg
类的最佳时机,它可以在任何大小的窗口/浏览器等上运行。这是一大堆需要阅读的代码。你能把范围缩小到一个更简单、更具体的例子吗?正如所指出的,你应该提供一个。至少,稍微清理一下代码,只包含有问题的部分(或者故意缩小它以显示问题)。我建议你编辑你的问题来做上面提到的一个。这很有效,谢谢!这是我第一次尝试创建自己的网页。我还尝试添加类('.logocorchng');在卷轴上,它会将导航栏中“logo”的文本颜色从卷轴上的白色更改为灰色,但当然它不起作用,我也不知道为什么?我在CSS的底部添加了一些,并用注释标记它。让我知道它是否有效。谢谢这管用!谢谢你的评论:-)没问题,很乐意帮忙!
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*navigation icon animation*/
var trigger='X';
jQuery(document).ready(function () {
$('#toggle-menu').click(function () {
trigger='X';
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
if (trigger=='X')
{
$("#toggle-menu").toggleClass();
trigger='ham';
}
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
$(".nav").hide();
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*navigation background fade in fade out */
$(window).scroll(function() {
if ($(window).scrollTop() > 100 ){
$('.bg').addClass('show');
} else {
$('.bg').removeClass('show');
};
});
$('.scroll').on('click', function(e){
e.preventDefault()
$('html, body').animate({
scrollTop : $(this.hash).offset().top
}, 1500);
});
/*----/-----navigation background fade in fade out */
});
</script>
<div class="header">
<div class="navbar">
<a href="" class="in" style="display: inline-block;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 155.2 144" style="enable-background:new 0 0 155.2 144;" xml:space="preserve">
<path style="fill:#545454;" d="M42.7,122.7H21.3V54h21.4V122.7z M32,44.6c-6.8,0-12.4-5.6-12.4-12.4c0-6.8,5.5-12.4,12.4-12.4
c6.8,0,12.4,5.5,12.4,12.4C44.4,39,38.9,44.6,32,44.6z M122.7,122.7h-21.3V89.3c0-8-0.1-18.2-11.1-18.2c-11.1,0-12.8,8.7-12.8,17.6
v34H56.1V54h20.5v9.4h0.3c2.8-5.4,9.8-11.1,20.2-11.1c21.6,0,25.6,14.2,25.6,32.7V122.7z"/>
<g>
<path style="fill:#FFFFFF;" d="M151.9,120c0.7-0.1,1-0.5,1-1.1c0-0.8-0.5-1.1-1.4-1.1H150v4h0.6V120h0.7l0,0l1.1,1.7h0.6L151.9,120
L151.9,120z M151.3,119.6h-0.7v-1.4h0.9c0.4,0,0.9,0.1,0.9,0.6C152.4,119.5,151.9,119.6,151.3,119.6z"/>
<path style="fill:#FFFFFF;" d="M151.3,116c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8
C155.2,117.6,153.5,116,151.3,116z M151.3,123.1c-1.8,0-3.3-1.4-3.3-3.3c0-1.9,1.4-3.3,3.3-3.3c1.8,0,3.3,1.4,3.3,3.3
C154.6,121.7,153.2,123.1,151.3,123.1z"/>
</g>
</svg>
</a>
<a href="" class="logo" style="display: inline-block;">Logo </a>
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
</div>
<div class="nav">
<div id="navigation">
<div class="bg navfade"> </div>
<ul>
<li class="navlist"><a href="" style="display: inline-block; width:100%;">Home</a></li>
<li class="navlist"><a href="#panel9" style="display: inline-block; width:100%;">About</a></li>
<li class="navlist"><a href="#panel2" style="display: inline-block; width:100%;">Work</a></li>
<li class="navlist"><a href="#panel8" style="display: inline-block; width:100%;">Contact</a></li>
</ul>
</div>
<div id="navpromo">
<ul>
<li class="seemore">Want to see more? Check out my instagram!</li>
</li><input type='submit' id="instagram" value="instagram"> </li>
</ul>
</div>
</div>
</div>
<div class="maincontent">
<div class="panel" id="panel1">
<div id="hero">
</div>
<div id="scroll">
<span class="arrow-bounce"><svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M7.41 7.84L12 12.42l4.59-4.58L18 9.25l-6 6-6-6z"/>
<path d="M0-.75h24v24H0z" fill="none"/>
</svg></span>
</div>
</div>
<div class="panel down" id="panel2">
<div class="inner">
<a href="" class="links" style="display: inline-block; width:100%;">Work Title 1</a>
</div>
</div>
<div class="panel" id="panel3">
<div class="inner">
<a href="" class="links" style="display: inline-block; width:100%;">Work Title 2</a>
</div>
</div>
.bg {
background-color: #fff !important;
border-bottom: 5px solid rgba(0, 0, 0, 0.2);
}
if ($(window).scrollTop() > 100 ) {
$('.bg').addClass('show');
}
else {
$('.bg').removeClass('show');
};
var dist = $('#panel2').offset().top;
console.log(dist);
if ($(window).scrollTop() > dist) {
$('.header').addClass('bg');
$('.header').addClass('navfade');
}
else {
$('.header').removeClass('bg');
}