Encabezado fijo - Desplazar - CSS/jQuery

Deseo crear un encabezado fijo. . Cada vez que el usuario se desplaza hacia abajo y la cabecera original desaparece, entonces el encabezado "pegajosa" debe poner enEncabezado fijo - Desplazar - CSS/jQuery

que actualmente utilizo este:

$(function(){ 
    // Check the initial Poistion of the Sticky Header 
    var stickyHeaderTop = $('#sticky').offset().top; 
    $(window).scroll(function(){ 
     if($(window).scrollTop() > stickyHeaderTop) { 
      //$('#sticky').css({position: 'fixed', top: '0px', float: 'right'}); 
      $('#sticky').addClass("sticky"); 
     } else { 
      $('#sticky').removeClass("sticky"); 
     } 
    }); 
});

Aunque, la actual añadir la clase "pegajosa" cada vez que un usuario simplemente hace un desplazamiento, y no cuando el encabezado original debería desaparecer.

Saludos

Fuente

2011-11-21 oliverbj

Esto funciona bien: http://jsfiddle.net/purmou/ZQwhL/embedded/result – Purag

Pero mi cabecera original se encuentra en la parte superior para empezar. – oliverbj

Si está en la parte superior, ¿por qué el usuario tiene que desplazarse para que quede fijo? Simplemente configúrelo en 'position: fixed;' para comenzar con: http://jsfiddle.net/purmou/ZQwhL/1/embedded/result,html,css/ – Purag

envolverlo con una div con id="whateveryouwannacallit"

y establecer:

#whateveryouwannacalltit{ 
position:fixed; 
top:0; 
left: 0; 
width:100%; 
}

Fuente

2012-01-14 16:37:30 Erick

En realidad, no será necesario envolver. Aquí está el código

$(document).ready(function() { 
    var stuck = $('#header'); 
    var start = $(div).offset().top; 
    $.event.add(window, "scroll", function() { 
    var p = $(window).scrollTop(); 
    $(stuck).css('position',((p)>start) ? 'fixed' : 'static'); 
    $(stuck).css('top',((p)>start) ? '0px' : ''); 
    }); 
});

crédito va a esta página: http://viralpatel.net/blogs/scroll-fix-header-jquery-facebook/

Fuente

2013-01-20 20:40:09

Encabezado fijo - Desplazar - CSS/jQuery

Respuesta

Cuestiones relacionadas