Question

我正在使用jQuery来动画我的网页的菜单栏。当您向下滚动时，它会折叠并向左移动，当您向后滚动到顶部时，它应该执行相反的操作。但是，当您到达顶部时，它会向后移动一部分，然后向后移动到左侧。这是我的代码：

＆＃13;

@charset "utf-8";
/* CSS Document */

body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
background-image: url(html-bg2.png);
background-size: 0.5%;
background-repeat: repeat;
background-color: #111111;
overflow: auto;
}

#headbar_left {
position: fixed;
left: 0;
margin: 0;
//margin-top: 3vh;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.5s ease-in-out;
transform-origin: 100% -50%;
}

#headbar_right {
position: fixed;
right: 0;
margin: 0;
//margin-top: 3vh;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.5s ease-in-out;
transform-origin: 0% 50%;
}

#circle_logo {
position: fixed;
z-index: 1;
width: 14vh;
height: 14vh;
border-radius: 7vh;
background-color: #161616;
left: calc(50vw - 7vh);
box-sizing: border-box;
border: 1vh solid #8704ff;
text-align: center;
line-height: 14vh;
transition: all 0.5s ease-in-out;
}

#logo {
height: 100%;
display: inline-block;
vertical-align: center;
transition: inherit;
}

.spin {
transform: rotate(360deg);
}

.collapse {
transform: scaleX(0);
}

.move_left {
transition: all 0.3s ease-in-out !important;
transform: translateX(calc(7vh - 50vw));
}

#circle_logo:hover {
transition: all 0.2s ease-in-out !important;
border-radius: 0;
}

#body_content {
position: absolute;
width: calc(100vw - 28vh);
height: 105vh;
margin-right: 14vh;
margin-left: 14vh;
background-color: #161616;
z-index: -1;
box-shadow: 0 3vh 10vh 4vh black;
color: white;
font-family: "Lucida Console";
padding-top: 21vh;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="uh.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>uh</title>
</head>
<body>
<div id="top"></div>
<div id="headbar_left"></div>
<div id="headbar_right"></div>
<a href="uh.html"><div id="circle_logo"><img src="html-logo.png" id="logo"></div></a>
<div id="body_content"><center><font size="9.5em"><b>WHAT IS THIS PAGE?</b></font><p>no one knows</center></div>
</body>
<script>
$(document).scroll(function() {
    if($(window).scrollTop() !== 0) {
        $("#circle_logo").addClass('spin');
        $("#headbar_left, #headbar_right").addClass('collapse');
        setTimeout(function() {
            $("#circle_logo").addClass('move_left');
            $("#logo").attr("src", "up-arrow.png");
            $("a").attr("href", "#top");
        }, 500);    
    }
    else {
        $("#circle_logo").removeClass('move_left');
        setTimeout(function() {
            $("#circle_logo").removeClass('spin');
            $("#headbar_left, #headbar_right").removeClass('collapse');
            $("#logo").attr("src", "html-logo.png");
            $("a").attr("href", "uh.html");
        }, 500);   
    }
});
</script>
</html>

＆＃13;

知道怎么解决这个问题吗？谢谢！

编辑：我修好了。这是新的javascript：

var a = 1;

function remove() {
    if (a === 0) {
        $("#circle_logo").removeClass('move_left');
        setTimeout(function() {
            $("#circle_logo").removeClass('spin');
            $("#headbar_left, #headbar_right").removeClass('collapse');
            $("#logo").attr("src", "html-logo.png");
            $("a").attr("href", "uh.html");
        }, 500);
        a = 1;
    }
}

function add() {
    if (a === 1) {
        $("#circle_logo").addClass('spin');
        $("#headbar_left, #headbar_right").addClass('collapse');
        setTimeout(function() {
            $("#circle_logo").addClass('move_left');
            $("#logo").attr("src", "up-arrow.png");
            $("a").attr("href", "#top");
        }, 500);
        a = 0;
    }
}

$(document).scroll(function() {
    if($(window).scrollTop() !== 0) {
        add();
    }
    else {
        remove();
    }
});

Answer 1

你在哪里尝试是非常封闭的。但问题在于，您设置几乎每个滚动的像素上已触发的setTimeOut()这么多，很多次。像这样它是固定的，你想要的是我想的......：

＆＃13;

$(document).scroll(function() {
    setTimeout(function() {
        if($(window).scrollTop() !== 0) {
            $("#circle_logo").addClass('spin');
            $("#headbar_left, #headbar_right").addClass('collapse');
                $("#circle_logo").addClass('move_left');
                $("#logo").attr("src", "up-arrow.png");
                $("a").attr("href", "#top");
        } else {
            $("#circle_logo").removeClass('move_left');
                $("#circle_logo").removeClass('spin');
                $("#headbar_left, #headbar_right").removeClass('collapse');
                $("#logo").attr("src", "html-logo.png");
                $("a").attr("href", "uh.html");
        }
    }, 50);    
});

＆＃13;

@charset "utf-8";
/* CSS Document */

body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
background-image: url(html-bg2.png);
background-size: 0.5%;
background-repeat: repeat;
background-color: #111111;
overflow: auto;
}

#headbar_left {
position: fixed;
left: 0;
margin: 0;
//margin-top: 3vh;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.5s ease-in-out;
transform-origin: 100% -50%;
}

#headbar_right {
position: fixed;
right: 0;
margin: 0;
//margin-top: 3vh;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.5s ease-in-out;
transform-origin: 0% 50%;
}

#circle_logo {
position: fixed;
z-index: 1;
width: 14vh;
height: 14vh;
border-radius: 7vh;
background-color: #161616;
left: calc(50vw - 7vh);
box-sizing: border-box;
border: 1vh solid #8704ff;
text-align: center;
line-height: 14vh;
transition: all 0.5s ease-in-out;
}

#logo {
height: 100%;
display: inline-block;
vertical-align: center;
transition: inherit;
}

.spin {
transform: rotate(360deg);
}

.collapse {
transform: scaleX(0);
}

.move_left {
transition: all 0.3s ease-in-out !important;
transform: translateX(calc(7vh - 50vw));
}

#circle_logo:hover {
transition: all 0.2s ease-in-out !important;
border-radius: 0;
}

#body_content {
position: absolute;
width: calc(100vw - 28vh);
height: 105vh;
margin-right: 14vh;
margin-left: 14vh;
background-color: #161616;
z-index: -1;
box-shadow: 0 3vh 10vh 4vh black;
color: white;
font-family: "Lucida Console";
padding-top: 21vh;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="headbar_left"></div>
<div id="headbar_right"></div>
<a href="uh.html"><div id="circle_logo"><img src="html-logo.png" id="logo"></div></a>
<div id="body_content"><center><font size="9.5em"><b>WHAT IS THIS PAGE?</b></font><p>no one knows</center></div>

＆＃13;

Answer 2

我刚刚删除了第一个setTimeout(function()（但其中没有代码）。

＆＃13;

$(document).scroll(function() {
    if($(window).scrollTop() !== 0) {
        $("#circle_logo").addClass('spin');
        $("#headbar_left, #headbar_right").addClass('collapse');
       
            $("#circle_logo").addClass('move_left');
            $("#logo").attr("src", "up-arrow.png");
            $("a").attr("href", "#top");
            
    }
    else {
        $("#circle_logo").removeClass('move_left');
        setTimeout(function() {
            $("#circle_logo").removeClass('spin');
            $("#headbar_left, #headbar_right").removeClass('collapse');
            $("#logo").attr("src", "html-logo.png");
            $("a").attr("href", "uh.html");
        }, 500);   
    }
});

＆＃13;

@charset "utf-8";
/* CSS Document */

body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
background-image: url(html-bg2.png);
background-size: 0.5%;
background-repeat: repeat;
background-color: #111111;
overflow: auto;
}

#headbar_left {
position: fixed;
left: 0;
margin: 0;
//margin-top: 3vh;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.5s ease-in-out;
transform-origin: 100% -50%;
}

#headbar_right {
position: fixed;
right: 0;
margin: 0;
//margin-top: 3vh;
width: 51vw;
height: 10vh;
background-color: #161616;
border-bottom: 1vh solid #8704ff;
transition: all 0.5s ease-in-out;
transform-origin: 0% 50%;
}

#circle_logo {
position: fixed;
z-index: 1;
width: 14vh;
height: 14vh;
border-radius: 7vh;
background-color: #161616;
left: calc(50vw - 7vh);
box-sizing: border-box;
border: 1vh solid #8704ff;
text-align: center;
line-height: 14vh;
transition: all 0.5s ease-in-out;
}

#logo {
height: 100%;
display: inline-block;
vertical-align: center;
transition: inherit;
}

.spin {
transform: rotate(360deg);
}

.collapse {
transform: scaleX(0);
}

.move_left {
transition: all 0.3s ease-in-out !important;
transform: translateX(calc(7vh - 50vw));
}

#circle_logo:hover {
transition: all 0.2s ease-in-out !important;
border-radius: 0;
}

#body_content {
position: absolute;
width: calc(100vw - 28vh);
height: 105vh;
margin-right: 14vh;
margin-left: 14vh;
background-color: #161616;
z-index: -1;
box-shadow: 0 3vh 10vh 4vh black;
color: white;
font-family: "Lucida Console";
padding-top: 21vh;
}

＆＃13;

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="uh.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>uh</title>
</head>
<body>
<div id="top"></div>
<div id="headbar_left"></div>
<div id="headbar_right"></div>
<a href="uh.html"><div id="circle_logo"><img src="html-logo.png" id="logo"></div></a>
<div id="body_content"><center><font size="9.5em"><b>WHAT IS THIS PAGE?</b></font><p>no one knows</center></div>
</body>
</html>

＆＃13;

removeClass删除该类，但随后将其添加回来

2 个答案: