web-dev-qa-db-fra.com

Laisse la barre de menu en haut lors du défilement

J'ai vu des sites Web qui, lorsque l'utilisateur fait défiler la page, une boîte apparaît à droite ou à gauche ...

En outre, vous remarquerez ce modèle: http://www.mvpthemes.com/maxmag/ le concepteur fait un travail agréable en laissant la barre de navigation fixée en haut.

Maintenant, comment sont-ils faits? Je suppose qu’il utilise jQuery pour connaître la position de la page et afficher la boîte.

Pouvez-vous s'il vous plaît me guider vers où je peux trouver un extrait afin que je puisse apprendre à faire quelque chose comme ça.

jquerycss
69
Wilson

Cet effet est généralement obtenu en ayant une logique jquery comme suit:

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 50) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

Cela indique qu'une fois que la fenêtre a survolé un certain nombre de pixels verticaux, il ajoute une classe au menu qui modifie sa valeur de position en "fixed".

Pour plus de détails sur la mise en œuvre, voir: http://jsfiddle.net/adamb/F4BmP/

150
adamb

Dans cet exemple, vous pouvez afficher votre menu centré.

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");
        }
    });
});
20
Tomas Gonzalez

idem adamb mais j'ajouterais une variable dynamique num

num = $('.menuFlotante').offset().top;

pour obtenir le décalage ou la position exacte à l'intérieur de la fenêtre afin d'éviter de trouver la bonne position.

 $(window).bind('scroll', function() {
         if ($(window).scrollTop() > num) {
             $('.menu').addClass('fixed');
         }
         else {
             num = $('.menuFlotante').offset().top;
             $('.menu').removeClass('fixed');
         }
    });
15
mariosm

Vous pouvez également utiliser les règles CSS:

position: fixed ; et top: 0px ;

sur votre tag de menu.

13
LGreen

Ou le faire de manière plus dynamique

$(window).bind('scroll', function () {
    var menu = $('.menu');
    if ($(window).scrollTop() > menu.offset().top) {
        menu.addClass('fixed');
    } else {
        menu.removeClass('fixed');
    }
});

En CSS, ajoutez une classe

.fixed {
    position: fixed;
    top: 0;
}
4
Bilal Iqbal

vous voudrez peut-être ajouter:

 $(window).trigger('scroll')

pour déclencher l'événement de défilement lorsque vous rechargez une page déjà défilée. Sinon, votre menu pourrait être déplacé.

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

vérifiez le lien ci-dessous, il a le HTML, CSS, JS et une démo en direct :) profiter

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

essayer avec sticky jquery plugin

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

C’est ce code qui est utilisé pour corriger la div quand il touche un sommet de navigateur espère que cela aidera beaucoup.

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

Vous pouvez essayer ceci avec votre navigation div:

postion: fixed;
top: 0;
width: 100%;
1
Kishan
$(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);
            }
        });
    });
1
Sumit patel