jquery - sigue - navigation sticky html

Deje la barra de menú fija en la parte superior cuando se desplaza

Question

He visto algunos sitios web que cuando el usuario se desplaza hacia abajo de la página, un cuadro emergente a la derecha o a la izquierda ...

Además, noté esta plantilla: http://www.mvpthemes.com/maxmag/ el diseñador hace un buen trabajo dejando la barra de navegación fija en la parte superior.

Ahora, ¿cómo se hacen? Supongo que usa jquery para obtener la posición de la página y mostrar la casilla.

¿Puedes guiarme a dónde puedo encontrar un fragmento para aprender a hacer algo así?

Answer 1

En este ejemplo, puede mostrar su menú centrado.

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

Answer 2

Este efecto generalmente se logra teniendo alguna lógica jquery de la siguiente manera:

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

Esto indica que una vez que la ventana se desplazó más allá de una cierta cantidad de píxeles verticales, agrega una clase al menú que cambia su valor de posición a "fijo".

Para detalles completos de implementación ver: http://jsfiddle.net/adamb/F4BmP/

Answer 3

Este es el código jquery que se usa para arreglar el div cuando toca la parte superior del navegador. Espero que ayude mucho.

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

Answer 4

O haz esto de una manera más dinámica

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

En CSS agrega clase

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

Answer 5

Puedes probar esto con tu nav div :

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

Answer 6

También puedes usar reglas css:

position: fixed ; y top: 0px ;

en tu etiqueta de menú.

Answer 7

es posible que desee agregar:

 $(window).trigger(''scroll'') 

para activar el evento de desplazamiento cuando recarga una página ya desplazada. De lo contrario, puede desubicar su menú.

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

Answer 8

lo mismo que adamb pero agregaría una variable dinámica num

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

para obtener la compensación o posición exacta dentro de la ventana para evitar encontrar la posición correcta.

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

Answer 9

prueba con el complemento jquery adhesivo

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>

Answer 10

revisa el siguiente enlace, tiene html, css, JS y una demostración en vivo :) disfruta

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>

Answer 11

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