web-dev-qa-db-fra.com

Comment construire une barre de menu flottante lors du défilement vers le bas

Lorsque j'ai fait défiler le site, la barre de menu noire en haut ressemble à une barre flottante. mais je pense que jquery est impliqué dans cela. J'ai essayé CSS mais semble ne pas fonctionner pour moi comme je le veux

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

#firstElement {
    margin-top: 250px
}

Voici l'idée de base du site Web de ce que je voudrais que le menu soit:

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

jquerywordpresscss3css-transitions
24
Mthe beseti

Enveloppez votre menu dans une div ou une section avec un ID ou une classe.

#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');
    }
  });
});

Je ne me souviens pas d'où je viens, donc pas de salutations pour moi, mais ça a marché pour moi.

46
Kortschot

je pense que l'utilisation Twitter Bootstrap peut vous aider.

Regardez Navbar dans le bootstrap et recherchez "Fixed to top"

Modifier: Si vous voulez quelque chose comme vous publiez, combinez avec quelque chose comme ça Laisser la barre de menu fixe en haut lors du défilement .

Lorsque le menu a un décalage supérieur égal à quelque chose, ajoutez la classe ".navbar-fixed-top".

3
Petr B.

Essaye ça

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>
3
Ranbir Singh

J'ai essayé plusieurs fois pour la solution fournie par @Kortschot, alors qu'en fin de compte, il s'est avéré que cette solution n'était pas idéale pour ma situation.

Voici mon problème lors de l'utilisation de la solution @Kortschot fournie:

  • La largeur de la barre flottante ne peut pas être maintenue lorsque les états de la barre flottante changent entre fixe ou non fixe
  • Je veux tout le processus peut être fait dans un seul script, tandis que la solution fournie par @Kortschot ne convient pas.

Voici ma solution qui peut faire tout le travail en un seul script (en utilisant 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>
2
lyfing

Dans l'URL que vous fournissez, je vois une barre de menus fixée en haut du navigateur pendant que vous faites défiler plusieurs lignes de la page.

Je sépare donc votre problème en 2 questions: tout d'abord, comment créer un menu supérieur fixe qui ne disparaîtra pas lors du défilement de la page. Deuxièmement, comment faire un menu fixe en haut après avoir fait défiler quelques lignes vers le bas.

Pour la première question, je change votre code 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 */
}

Et je pense que la deuxième question doit écrire js. Et bien je ne sais pas encore.

0
Charles Wu