Lassen Sie die Menüleiste beim Scrollen oben

Ich habe einige Websites gesehen, auf denen beim Scrollen des Benutzers ein Feld nach rechts oder links eingeblendet wird ...

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

Wie geht das nun? Ich denke, es verwendet jquery, um die Position der Seite zu ermitteln und die Box anzuzeigen.

Können Sie mich bitte dahin führen, wo ich einen Ausschnitt finden kann, damit ich lernen kann, so etwas zu tun?

Dieser Effekt wird normalerweise durch eine folgende Abfragelogik erreicht:

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

Sobald das Fenster über eine bestimmte Anzahl vertikaler Pixel gescrollt hat, wird dem Menü eine Klasse hinzugefügt, die den Positionswert auf "fest" ändert.

Ausführliche Informationen zur Implementierung finden Sie unter: http://jsfiddle.net/adamb/F4BmP/

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

das gleiche wie adamb, aber ich würde eine dynamische Variable num hinzufügen

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

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

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

Sie können auch CSS-Regeln verwenden:

position: fixed ; und top: 0px ;

auf Ihrem Menü-Tag.

Oder machen 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;
}

Vielleicht möchten Sie hinzufügen:

 $(window).trigger('scroll') 

um das Bildlaufereignis auszulösen, wenn Sie eine bereits gescrollte Seite neu 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');
            }
        }); 
}); 

Überprüfen Sie den Link unten, es hat die 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>

versuchen Sie es mit dem 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>

Dies ist JQuery-Code, der verwendet wird, um das Div zu reparieren, wenn es einen oberen Bereich des Browsers berührt. Ich hoffe, es wird viel helfen.

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

Sie können dies mit Ihrem Navi versuchen div:

postion: fixed;
top: 0;
width: 100%;

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