So erstellen Sie eine schwebende Menüleiste, wenn Sie nach unten scrollen

Lesezeit: 8 Minuten

So erstellen Sie eine schwebende Menuleiste wenn Sie nach unten
Mthe besti

Als ich nach unten scrollte, sah die schwarze Menüleiste oben wie eine Float-Leiste aus. aber ich denke, es ist jquery beteiligt. Ich habe CSS ausprobiert, scheint aber bei mir nicht so zu funktionieren, wie ich es möchte

#menucontainer {
    position:fixed;
    top:0;
    height: 250px
}

#firstElement {
    margin-top: 250px
}

Hier ist die Grundidee der Website, wie das Menü aussehen soll:

http://avathemes.com/WP/Hexic/

  • mögliches Duplikat von Leave menu bar fixed on top when scrolling

    – Nachtfeuerkatze

    18. Juni 2013 um 11:23 Uhr

Wickeln Sie Ihr Menü in ein div oder einen Abschnitt mit einer ID oder Klasse ein.

#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's below the form
    if (y >= top) {
      // if so, ad the fixed class
      $('#yourID').addClass('fixed');
    } else {
      // otherwise remove it
      $('#yourID').removeClass('fixed');
    }
  });
});

Ich kann mich nicht erinnern, woher ich das habe, also keine Grüße an mich, aber es hat für mich funktioniert.

  • Cooler Kumpel, danke fürs Shring… Ich denke, das Hinzufügen eines Übergangseffekts zur Breitenänderung würde es super cool machen.

    – Sagiv

    9. Dezember 2013 um 7:46 Uhr

  • Dies sollte eine akzeptierte Antwort sein, es bot eine saubere und schnelle Lösung für das Problem des Autors, ohne dass Plugins oder zusätzliche Abhängigkeiten erforderlich waren.

    – Tamik Soziev

    31. Dezember 2013 um 13:19 Uhr

  • Der obige Code könnte von hier stammen: benmarshall.me/jquery-sticky-navigation. Als Bonus: jsFiddle-Demo bereitgestellt.

    – schätze warum

    4. Januar 2014 um 11:27 Uhr

1646174347 975 So erstellen Sie eine schwebende Menuleiste wenn Sie nach unten
Ranbir Singh

Versuche dies

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>

So erstellen Sie eine schwebende Menuleiste wenn Sie nach unten
Peter B.

Ich denke, dass verwenden Twitter-Bootstrap kann dir helfen.

Ansehen Navigationsleiste im Bootstrap und suche nach “Fixed to top”

Bearbeiten: Wenn Sie etwas wie Sie posten möchten, kombinieren Sie es mit etwas wie diesem: Menüleiste beim Scrollen oben fixiert lassen .

Wenn das Menü einen oberen Versatz gleich etwas hat, fügen Sie die Klasse “.navbar-fixed-top” hinzu.

Ich habe viele Male versucht, die von @Kortschot bereitgestellte Lösung zu finden, während sich schließlich herausstellte, dass diese Lösung für meine Situation nicht ideal war.

Hier ist mein Problem bei der Verwendung der von @Kortschot bereitgestellten Lösung:

  • Die Breite des Schwebebalkens kann nicht beibehalten werden, wenn sich der Zustand des schwebenden Balkens zwischen fest oder nicht fest ändert
  • ich will Der gesamte Prozess kann in nur einem Skript durchgeführt werdenwährend die von @Kortschot bereitgestellte Lösung nicht passt.

Hier ist meine Lösung, die die ganze Arbeit in nur einem Skript erledigen kann (mit 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's width of previous state 
            $("#floating_bar.fixed").width(menuWidth);
        }else {
            $("#floating_bar").removeClass("fixed");
        }
    });
});
</script> 

In der von Ihnen bereitgestellten URL sehe ich eine Menüleiste oben im Browser, während Sie mehrere Zeilen der Seite nach unten scrollen.

Also trenne ich Ihr Problem in 2 Fragen: Erstens, wie man ein festes Top-Menü erstellt, das beim Scrollen der Seite nicht verschwindet. Zweitens, wie man ein Menü oben fixiert, nachdem man ein paar Zeilen nach unten gescrollt hat.

Für die erste Frage ändere ich Ihren CSS-Code.

#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 */
}

Und ich denke, die zweite Frage muss js schreiben. Nun, ich weiß es noch nicht.

905600cookie-checkSo erstellen Sie eine schwebende Menüleiste, wenn Sie nach unten scrollen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy