스크롤할 때 메뉴 바를 상단에 고정한 채로 둡니다.
사용자가 페이지를 아래로 스크롤하면 오른쪽이나 왼쪽으로 상자가 뜨는 웹사이트를 본 적이 있습니다.
또한 이 템플릿을 확인했습니다. http://www.mvpthemes.com/maxmag/ 디자이너는 탐색 막대를 상단에 고정시킨 상태에서 훌륭한 작업을 수행합니다.
자, 이것들은 어떻게 됩니까?Jquery를 사용해서 페이지의 위치를 파악하고 상자를 보여주는 것 같습니다.
그런 것을 배울 수 있도록 토막글을 찾을 수 있는 곳으로 안내해 주실 수 있나요?
이 효과는 일반적으로 다음과 같은 몇 가지 jquery 로직을 가짐으로써 얻을 수 있습니다.
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 50) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
이것은 윈도우가 특정한 수의 수직 픽셀을 지나치면 위치 값을 "고정"으로 변경하는 클래스를 메뉴에 추가한다는 것을 의미합니다.
전체 구현에 대한 자세한 내용은 http://jsfiddle.net/adamb/F4BmP/ 을 참조하십시오.
이 예제에서는 메뉴 중심을 표시할 수 있습니다.
HTML
<div id="main-menu-container">
<div id="main-menu">
//your menu
</div>
</div>
CSS
.f-nav{ /* To fix main menu container */
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#main-menu-container {
text-align: center; /* Assuming your main layout is centered */
}
#main-menu {
display: inline-block;
width: 1024px; /* Your menu's width */
}
JS
$("document").ready(function($){
var nav = $('#main-menu-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 125) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
damb와 같으나 동적 변수 번호를 추가합니다.
num = $('.menuFlotante').offset().top;
올바른 위치를 찾지 않도록 정확한 간격띄우기 또는 창 내부 위치를 가져옵니다.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > num) {
$('.menu').addClass('fixed');
}
else {
num = $('.menuFlotante').offset().top;
$('.menu').removeClass('fixed');
}
});
CSS 규칙을 사용할 수도 있습니다.
position: fixed ;그리고.top: 0px ;
당신의 메뉴 태그에.
또는 보다 역동적인 방법으로 작업을 수행할 수 있습니다.
$(window).bind('scroll', function () {
var menu = $('.menu');
if ($(window).scrollTop() > menu.offset().top) {
menu.addClass('fixed');
} else {
menu.removeClass('fixed');
}
});
CSS에서 클래스 추가
.fixed {
position: fixed;
top: 0;
}
sticky jquery 플러그인으로 시도
https://github.com/garand/sticky
<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0});
});
</script>다음을 추가할 수 있습니다.
$(window).trigger('scroll')
이미 스크롤된 페이지를 다시 로드할 때 스크롤 이벤트를 트리거합니다.그렇지 않으면 메뉴가 제 위치를 벗어날 수 있습니다.
$(document).ready(function(){
$(window).trigger('scroll');
$(window).bind('scroll', function () {
var pixels = 600; //number of pixels before modifying styles
if ($(window).scrollTop() > pixels) {
$('header').addClass('fixed');
} else {
$('header').removeClass('fixed');
}
});
});
아래 링크를 확인해보세요. html, css, JS 및 라이브 데모가 있습니다 :) 즐겨보세요.
http://codepen.io/senff/pen/ayGvD
// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();
scrollIntervalID = setInterval(stickIt, 10);
function stickIt() {
var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;
if ($(window).scrollTop() >= (orgElementTop)) {
// scrolled past the original position; now only show the cloned, sticky element.
// Cloned element should always have same left position and width as original element.
orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement+'px').show();
$('.original').css('visibility','hidden');
} else {
// not scrolled past the menu; only show the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}* {font-family:arial; margin:0; padding:0;}
.logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;}
.intro {color:#777; font-style:italic; margin:10px 0;}
.menu {background:#00a; color:#fff; height:40px; line-height:40px;letter-spacing:1px; width:100%;}
.content {margin-top:10px;}
.menu-padding {padding-top:40px;}
.content {padding:10px;}
.content p {margin-bottom:20px;}<div class="intro">Some tagline goes here</div>이것은 div가 브라우저 상단에 닿을 때 사용하는 jquery code로 많은 도움이 되기를 바랍니다.
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
$.fn.scrollBottom = function() {
return $(document).height() - this.scrollTop() - this.height();
};
var $el = $('#sidebar>div');
var $window = $(window);
var top = $el.parent().position().top;
$window.bind("scroll resize", function() {
var gap = $window.height() - $el.height() - 10;
var visibleFoot = 172 - $window.scrollBottom();
var scrollTop = $window.scrollTop()
if (scrollTop < top + 10) {
$el.css({
top: (top - scrollTop) + "px",
bottom: "auto"
});
} else if (visibleFoot > gap) {
$el.css({
top: "auto",
bottom: visibleFoot + "px"
});
} else {
$el.css({
top: 0,
bottom: "auto"
});
}
}).scroll();
});
});//]]>
</script>
$(window).scroll(function () {
var ControlDivTop = $('#cs_controlDivFix');
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
ControlDivTop.stop().animate({ 'top': ($(this).scrollTop() - 62) + "px" }, 600);
} else {
ControlDivTop.stop().animate({ 'top': ($(this).scrollTop()) + "px" },600);
}
});
});
내비게이션으로 사용해보실 수 있습니다.div:
div.fixed{
postion: fixed;
top: 0;
width: 100%;
}
JavaScript를 사용하면 특정 요소가 뷰포트에 들어가거나 나갈 때 Intersection Observer API를 사용하여 이 효과를 트리거할 수 있습니다.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
언급URL : https://stackoverflow.com/questions/13274592/leave-menu-bar-fixed-on-top-when-scrolled
'programing' 카테고리의 다른 글
| 부유한 디브를 부모의 100% 높이로 만드는 방법은? (0) | 2023.11.06 |
|---|---|
| 텍스트가 넘치지 않고 다음 줄에 나타나도록 하려면 어떻게 해야 합니까? (0) | 2023.11.06 |
| 서명되지 않은 int 0xFFFFFFFF가 int -1과 같은 이유는 무엇입니까? (0) | 2023.11.06 |
| 워드프레스에서 분류법 또는 사용자 정의 필드를 동시에 조회하려면 어떻게 해야 합니까? (0) | 2023.11.06 |
| jQuery에서 Grep vs 필터? (0) | 2023.11.06 |