Lassen Sie die Menüleiste beim Scrollen oben fixiert [closed]

Question 1

Ich habe einige Websites gesehen, auf denen, wenn der Benutzer auf der Seite nach unten scrollt, rechts oder links ein Kästchen auftaucht …

Beachten Sie auch diese Vorlage: http://www.mvpthemes.com/maxmag/ Der Designer macht einen guten Job und lässt die Navigationsleiste oben fixiert.

Nun, wie werden diese gemacht? Ich denke, es verwendet jquery, um die Position der Seite zu ermitteln und das Feld anzuzeigen.

Können Sie mir bitte zeigen, wo ich einen Ausschnitt finden kann, damit ich lernen kann, so etwas zu tun.

Question 2

Dieser Effekt wird normalerweise durch eine jquery-Logik wie folgt erreicht:

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

Dies besagt, sobald das Fenster über eine bestimmte Anzahl vertikaler Pixel hinaus gescrollt ist, fügt es dem Menü eine Klasse hinzu, die seinen Positionswert auf “fest” ändert.

Vollständige Implementierungsdetails finden Sie unter: http://jsfiddle.net/adamb/F4BmP/

Question 3

In diesem Beispiel können Sie Ihr Menü zentriert anzeigen.

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

Question 4

wie Adamb, aber ich würde eine dynamische Variable num hinzufügen

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

um den genauen Versatz oder die genaue Position innerhalb des Fensters zu erhalten, um zu vermeiden, die richtige Position zu finden.

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

Question 5

Oder tun Sie dies dynamischer

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

In CSS Klasse hinzufügen

.fixed {
    position: fixed;
    top: 0;
}

Question 6

versuchen Sie es mit dem Sticky JQuery-Plugin

https://github.com/garand/sticky

<script src="https://stackoverflow.com/questions/13274592/jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

Question 7

Vielleicht möchten Sie hinzufügen:

 $(window).trigger('scroll')

um das Scroll-Ereignis auszulösen, wenn Sie eine bereits gescrollte Seite erneut laden. Andernfalls könnten Sie Ihr Menü aus der Position bringen.

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

Question 8

Überprüfen Sie den Link unten, er enthält HTML, CSS, JS und eine Live-Demo 🙂 Viel Spaß

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>