. (임의의) 스크롤에서 고정 메뉴가 투명에서 반투명으로 배경을 변경하고 스크롤 버튼이 사라지도록하고 싶습니다. 버튼은 지금부터 숨겨져 있어야하지만 맨 위로 스크롤하면 메뉴가 다시 투명 해집니다.점프 헤더
이 목적으로 jQuery Waypoints를 사용하고 있습니다. 다음 두 코드를 사용하여 효과를 얻었지만 스크롤 할 때 메뉴가 점프합니다., 편집 :메뉴가 항상 고정 된 위치에 있지 않은 것처럼 더 자세하게 깜박입니다. 스크롤 할 때 메뉴가 페이지와 함께 밖으로 스크롤 한 다음 갑자기 고정 된 위치로 다시 이동하는 것처럼 보일 때가 있습니다. 때로는 잠시 후 올바르게 작동하기 시작합니다. 다음 두 줄의 코드를 제거하면 점프하지 않지만 두 이벤트에 대해 동일한 트리거가 필요합니다.
EDIT2 : 메뉴와 함께 중간 점을 사용하지 않으면 깜박이지 않습니다. 스크롤은 매끄럽고 메뉴는 항상 페이지의 다른 모든 요소의 꼭대기에 있습니다.
$("#home-slide .btn-navigate").removeClass("pulse animated");
$("#home-slide .btn-navigate").addClass("fadeOutUp animated2");
HTML :
<header id="masthead">
<nav class="navbar navbar-fixed-top">
<div class="container">
MENU CONTENT
</div>
</nav>
</header>
<section id="home-slide">
<div class="container">
<h1 class="heading">HEADING</h1>
<p class="font2">
TEXT</p>
<a href="#" class="btn-navigate animated pulse">Scroll Button</a>
</div>
</section>
jQuery를 :
jQuery(document).ready(function ($) {
$(function() {
$("#masthead nav").waypoint(function() {
$("#masthead nav").toggleClass('scrolling');
$("#home-slide .btn-navigate").removeClass("pulse animated");
$("#home-slide .btn-navigate").addClass("fadeOutUp animated2");
}, { offset: '-20px' });
});
});
MY 탐색 CSS :
#masthead {
nav {
min-height: 120px;
padding-top: 2.727rem;
background: rgba(51,58,64,0.0);
-webkit-transition: background-color 0.5s linear;
.container {
position: relative;
}
.navbar-nav {
a {
color: @lms-white;
font-weight: bold;
text-transform: none;
text-shadow: 1px 1px 2px rgba(50, 50, 50, 1);
padding: 7px 1.17rem;
border: 2px solid transparent;
.border-radius(5px);
&:hover {
background: transparent;
border: 2px solid @lms-pink;
}
}
}
.navbar-brand {
padding: 7px 15px;
}
&.scrolling {
background: rgba(51,58,64,0.9);
-webkit-transition: background-color 0.5s linear;
}
}
부트 스트랩 탐색 CSS :
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
어떤 생각이 어떻게이 문제를 해결하기 위해? 고맙습니다!
CSS를 공유 할 수도 있습니까? – imakewebthings
CSS가 공유되어 문제가 자세히 설명되었습니다. –