修復了導航欄，JavaScript損壞的問題
[英]Fixed Nav Bar, Broken Javascript
問題描述
我目前正在網站上工作，並且正在嘗試使滾動/固定導航欄正常工作。 我不打算繼續學習本教程 ，但是我無法像他的預覽中那樣淡入/淡出。 我已經嘗試了所有我能想到的一切，只是將計算機扔在牆上。 我對Java語言的了解不多，所以這只會增加無奈感。
我在此處發布了代碼預覽，並在下面列出了代碼的javascript部分。 任何和所有幫助將不勝感激。
$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 110) {
$('#fixedbar').fadeIn(100);
}
else if(scrolltop <= 110) {
$('#fixedbar').fadeOut(100);
}
});
});
@charset "UTF-8";
/* CSS Document */
/*BASICS*/
*{
padding: 0px;
margin: 0px;
}
body {
margin: 0px !important ;
}
html{
/* background-image: url(parts/bg5.png);
background-repeat: repeat;
background-attachment: fixed; */
background-color: #D1DEF2;
}
header, section, footer, aside, nav, main, article, figure {
display: block;
}
/*HEADER*/
header {
width: 100%;
height: 110px;
position: absolute;
background-color: #fff;
margin: -110px auto 0px;
z-index: 50;
}
header #header-content{
width: 1024px;
margin: auto;
}
header #headlogo{
width: 306px;
height: 81px;
background-image:url(parts/header/logo.png);
background-position: center;
margin: 21px 0px 25px 32px;
background-repeat: no-repeat;
-webkit-transition: background-position 1s ease;
transition: background-position 1s ease;
}
/* NAV */
nav{
margin: 10px auto 0px;
width: 100%;
height: 64px;
background-color: #ffffff;
border-bottom: 1px solid #445476;
box-shadow-bottom: 0px -1px 5px #212B44;
-webkit-transition: all 1s ease;
transition: all 1s ease;
postition: absolute;
z-index: 100;
margin-top: 110px;
}
nav .nav-content{
width: 1024px;
margin: 0px auto;
}
nav .navmain{
margin: 30px 154px 0px;
position: absolute;
}
#navigation{
z-index: 10;
}
nav #end-leftnav{
margin-right: 36px;
}
nav #start-rightnav{
margin-left: 123px;
}
nav ul{
list-style-type: none;
text-decoration: none;
font-family: "Cabin Condensed", sans-serif;
font-weight: 700;
color: #585858;
}
nav li{
float: left;
}
nav .navspot{
padding: 0px 5px 3px;
color: inherit;
margin: 0px 17px;
color: #585858;
}
nav .navspot:hover{
border-bottom: 3px solid #445476;
}
nav .navsoc{
margin-left: 27px;
}
nav .navsoc img{
float: left;
margin: 0px 3px 10px;
opacity: 1;
transition: opacity 1s;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
}
nav .navsoc img:hover{
border-bottom: 0px;
opacity: .6;
transition: opacity 1s;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
}
nav #columncircle{
margin: -30px auto 0px;
float: left;
clear: both;
position: absolute;
/* border-radius: 100%;
box-shadow: 2px 2px 1px #333333;
background-color: #445476; */
}
/* FIXED NAV EXCLUSIVE */
#fixedbar {
display: none;
position: fixed;
width: 100%;
height: 65px;
z-index: 100;
margin-top: -110px;
}
#fixednav {
display: block;
margin: -500px 0px 0px;
padding: 0px auto;
opacity: 1;
width: 100%;
}
nav .navfixed{
margin: 35px 154px 0px;
}
#filler{
margin-top: 1000px;
z-index: 1;
}
2 個解決方案
解決方案1
0 2015-02-05 13:54:38
#navigation
left: 0
top: 0
z-index: 10
position: fixed
<body style="margin-top:(height of the navigation bar)px">
解決方案2
0 已采納 2015-02-05 13:55:23
您的fadeIn / fadeOut功能非常快。
改變它的速度
$(document).ready(function(){
$('#navigation a, #fixedbar a').on('click', function(e) {
e.preventDefault();
});
$(window).on('scroll',function() {
var scrolltop = $(this).scrollTop();
if(scrolltop >= 110) {
$('#fixedbar').fadeIn(250);
}
else if(scrolltop <= 110) {
$('#fixedbar').fadeOut(250);
}
});
});
啟用JavaScript的滾動固定導航欄出現問題
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.