스크롤 할 때 메뉴 막대를 상단에 고정

스크롤 할 때 메뉴 막대를 상단에 고정

---

사용자가 페이지를 아래로 스크롤하면 상자가 오른쪽이나 왼쪽에 팝업되는 웹 사이트를 보았습니다.

또한 다음 템플릿을 확인했습니다. 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");
        }
    });
});

---

adamb와 동일하지만 동적 변수 num을 추가합니다.

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;
}

---

다음을 추가 할 수 있습니다.

 $(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 코드입니다.

<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>

---

끈적한 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>

---

탐색으로 이것을 시도 할 수 있습니다 div.

postion: fixed;
top: 0;
width: 100%;

---

$(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);
            }
        });
    });

참고URL : https://stackoverflow.com/questions/13274592/leave-menu-bar-fixed-on-top-when-scrolled