Как построить плавающую строку меню при прокрутке вниз

Оберните свое меню в div или раздел с идентификатором или классом.

#yourID.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    border-bottom: 5px solid #ffffff;
}

//STICKY NAV
$(document).ready(function () {  
  var top = $('#yourID').offset().top - parseFloat($('#yourID').css('marginTop').replace(/auto/, 100));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that below the form
    if (y >= top) {
      // if so, ad the fixed class
      $('#yourID').addClass('fixed');
    } else {
      // otherwise remove it
      $('#yourID').removeClass('fixed');
    }
  });
});

Не помню, откуда я это получил, поэтому никаких приветствий для меня, но это сработало для меня.

Попробуйте это

CSS

* {margin: 0; padding: 0; outline: 0;}


body {
    font-family: Helvetica, Arial, Verdana, sans-serif;
    color: #999;
    font-size: 12px;
    background:#bfbfbf;


}


h1, h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    margin:0 0 15px 0;
}


h1 {
    font-size: 36px;
    letter-spacing: -2px;
    line-height: 100%;
}

h1.title {
    font-size: 46px;
    font-weight: 700;
    color: #6a6a6a;


}


h2 {
    font-size: 24px;
}

p {
    margin: 0 0 15px 0;
}

.menuBtn {

    background: center center no-repeat transparent;
    background: #000;
    display: block;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 10px;

}

.clear {
    clear: both;
}
.wrap {
        /*background:url(../images/bg.png) top left repeat-x;*/
        width: 100%;
        max-width: 1140px;
        min-width: 960px;
        z-index: 10;
        position: relative;
        margin: 0 auto;
        padding: 0;

}



.section {
    width: 100%;
    max-width: 1140px;
    min-width: 960px;
    z-index: 10;
    position: relative;
    margin: 0 auto;
    padding: 0 0 20px 0;
}


.inner {
    width: 960px;
    margin: 0 auto;
    position: relative;
    min-height: 50px;
    padding:30px 0;
    font-size: 18px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    padding:30px 0;
}


/* This is the selector i used for my menu, it needs to be set as position:absolute; */
.subMenu {
    position: absolute;
    top: 462px;
    height: 50px;
    z-index: 1000;
    width: 100%;
    max-width: 1140px;
    min-width: 960px;
    background: #aabd46;

}

.subMenu .inner {
    padding:0;
    font-weight: 400;
}





.subNavBtn {
    display: block;
    height: 35px;
    width: 12%;
    float: left;
    margin: 0px 0px 0 0;
    text-decoration: none;
    font-size: 14px;
    padding: 15px 2% 0 2%;
    text-align: center;
    color: #fff;
}

.end {
    margin: 0;
}


/* SECTIONS */
.sTop {
    min-height: 630px;
    background:#e5e5e5;
    color:#3d3d3d;

}



.s1 {
    min-height: 500px;
    background: #2e2e2e;
}


.s2 {
    min-height: 500px;
    background: #3f3f3f;
}


.s3 {
    min-height: 500px;
    background: #504f4f;
}


.s4 {
    min-height: 500px;
    background: #6e87a1;
    color: white;
}

.s5 {
    min-height: 500px;
    background: #293b4d;
    color: white;
}

JavaScript

:

  (function(){


        $.fn.smint = function( options ) {

            // adding a class to users div
            $(this).addClass('smint')

            var settings = $.extend({
                'scrollSpeed '  : 500
                }, options);


            return $('.smint a').each( function() {


                if ( settings.scrollSpeed ) {

                    var scrollSpeed = settings.scrollSpeed

                }


                ///////////////////////////////////

                // get initial top offset for the menu 
                var stickyTop = $('.smint').offset().top;   

                // check position and make sticky if needed
                var stickyMenu = function(){

                    // current distance top
                    var scrollTop = $(window).scrollTop(); 

                    // if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
                    if (scrollTop > stickyTop) { 
                        $('.smint').css({ 'position': 'fixed', 'top':0 }).addClass('fxd');

                        } else {
                            $('.smint').css({ 'position': 'absolute', 'top':stickyTop }).removeClass('fxd'); 
                        }   
                };

                // run function
                stickyMenu();

                // run function every time you scroll
                $(window).scroll(function() {
                     stickyMenu();
                });

                ///////////////////////////////////////


                $(this).on('click', function(e){


                    // gets the height of the users div. This is used for off-setting the scroll so th emenu doesnt overlap any content in the div they jst scrolled to
                    var selectorHeight = $('.smint').height();   

                    // stops empty hrefs making the page jump when clicked
                    e.preventDefault();

                    // get id pf the button you just clicked
                    var id = $(this).attr('id');

                    // gets the distance from top of the div class that matches your button id minus the height of the nav menu. This means the nav wont initially overlap the content.
                    var goTo =  $('div.'+ id).offset().top -selectorHeight;

                    // Scroll the page to the desired position!
                    $("html, body").animate({ scrollTop: goTo }, scrollSpeed);

                }); 



            });

        }

    })();

HTML

<!DOCTYPE html>
<html>
<head>
<title>SMINT Demo</title>

<meta name = "keywords" content = "" />
<meta name = "description" content = "" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1 user-scalable=no">

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>

<link href="css/demo.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript"  src="js/jquery.smint.js"></script>

<script type="text/javascript">

$(document).ready( function() {
    $('.subMenu').smint({
        'scrollSpeed' : 1000
    });
});

</script>

</head>

<body>

    <div class="wrap">

      <div class="subMenu" >
        <div class="inner">
            <a href="#" id="sTop" class="subNavBtn">Home</a> 
            <a href="#" id="s1" class="subNavBtn">About me </a>
            <a href="#" id="s2" class="subNavBtn"> Portfolio</a>
            <a href="#" id="s3" class="subNavBtn">Working</a>
            <a href="#" id="s4" class="subNavBtn">Hello</a>
            <a href="#" id="s5" class="subNavBtn end">lets go</a>
        </div>



    </div>


    <div class="section sTop">



        <div class="inner">
            <h1>Welcome to my site </h1>
            <p>Click the links below !</p>

        </div>
        <br class="clear">
    </div>





    <div class="section s1">

        <div class="inner">

            <h1>About me </h1>

        </div>

    </div>

    <div class="section s2">
        <div class="inner">

            <h1>Portfolio</h1>

        </div>

    </div>

    <div class="section s3">
        <div class="inner">

        <h1>Working Standards</h1>

        </div>

    </div>

    <div class="section s4">
        <div class="inner">

            <h1>Hello</h1>

        </div>

    </div>

    <div class="section s5">
        <div class="inner">

        <h1>Lets Go</h1>

        </div>

    </div>



</div>
</body>
</html>

Я думаю, что использование Twitter Bootstrap может вам помочь.

Посмотрите Navbar в bootstrap и найдите "Fixed to top"

Изменить: Если вы хотите что-то вроде публикации, соединитесь с чем-то вроде Оставить панель меню, зафиксированную сверху при прокрутке.

Когда в меню есть верхнее смещение, что-то добавляет класс ".navbar-fixed-top".

Я много раз пробовал решение @Kortschot, и, наконец, оказалось, что это решение не было идеальным для моей ситуации.

Вот моя проблема при использовании решения @Kortschot:

• Ширина плавающей полосы не может поддерживаться при изменении состояния плавающих баров между исправлением или отсутствием исправления.
• Я хочу, чтобы весь процесс можно было выполнить только одним script, в то время как предоставленное решение @Kortschot не подходит.

Вот мое решение, которое может выполнять всю работу только в одном script (с использованием 1.7+ jquery):

<script>
//浮动条设置(set the floating bar)
$( function(){
    //add new .fixed style to the <head>
    var css = '#floating_bar.fixed{position:fixed;top:1px;z-index:9999;}',
        head = document.head || document.getElementsByTagName('head')[0],
        style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet){ style.styleSheet.cssText = css; } 
    else { style.appendChild(document.createTextNode(css)); }
    head.appendChild(style);

    var menuOffset = $("#floating_bar")[0].offsetTop;
    var menuWidth = document.getElementById("floating_bar").offsetWidth;
    $(document).on("scroll", function(){
        var docScroll = $(document).scrollTop();
        if(docScroll >= menuOffset) { 
            $("#floating_bar").addClass("fixed");
            //dynamically change the width of floating bar according to it width of previous state 
            $("#floating_bar.fixed").width(menuWidth);
        }else {
            $("#floating_bar").removeClass("fixed");
        }
    });
});
</script> 

В указанном вами URL-адресе я вижу строку меню, расположенную в верхней части браузера, когда вы прокручиваете несколько строк страницы.

Итак, я разделяю вашу проблему на 2 вопроса: Во-первых, как сделать фиксированное верхнее меню, которое не будет исчезать при прокрутке страницы. Во-вторых, как сделать меню зафиксированным сверху после прокрутки нескольких строк.

Для первого вопроса я изменяю ваш код css.

#menucontainer {
    float:top;
    position:fixed;
    top:0;
    height: 100px;
    width: 100%;
    background-color: eeee00; /* makes other content won't be seen when the page scrolling */
}

И я думаю, что второй вопрос нужно написать js. Ну, я еще не знаю.