tablas - Menú de Javascript Saltando de abajo hacia arriba en lugar de desplazarse

obtener datos de una tabla html javascript

Question

Estoy tratando de hacer un menú que se quede en la parte inferior de la página y luego en la parte superior después de desplazarse. El único problema es que, en lugar de desplazarse con la página, el menú permanece en el mismo lugar y luego salta a la parte superior derecha al final.

También estoy ejecutando stellar.js en el sitio y me pregunté si esto era conflictivo, pero eliminé el javascript de llamada y el problema persistió, así que lo devolví.

La URL del sitio es www.percolatedpropaganda.co.uk

Estoy perplejo y cualquier ayuda sería muy apreciada.

Javascript

$(document).ready(function() {
var windowH = $(window).height();
var stickToBot = windowH - $(''#menu'').outerHeight(true);
$(''#menu'').css({''top'': stickToBot + ''px''});
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > stickToBot ) {
$(''#menu'').css({''position'':''fixed'',''top'' :''0px''});
} else {
$(''#menu'').css({''position'':''absolute'',''top'': stickToBot +''px''});
}
});
});

CSS

#menu {
font-size: 85%;
position: relative;
float: left;
}

Answer 1

¿Por qué no pruebas esto?

Javascript:

$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > 0 ) {
$(''#menu'').css({bottom: '''', top :''0px''});
} else {
$(''#menu'').css({top: '''', bottom: ''0px''});
}
});
});

CSS:

 #menu {
position: fixed;
bottom: 0;
}

Compruébalo: Ejemplo

ACTUALIZAR:
Si desea que el movimiento sea animado, use esto en su lugar:

Javascript:

$(document).ready(function() {
var menu = $(''#menu'');
var windowH = $(window).height();
var stickToBot = windowH - menu.outerHeight(true);
menu.css(''top'', stickToBot + ''px'');
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal > 0 ) {
menu.stop().animate({top :''0px''});
} else {
menu.stop().animate({top: stickToBot + ''px''});
}
});
});

CSS:

 #menu {
position: fixed;
}

Eche un vistazo: Ejemplo

ACTUALIZACIÓN 2:

Si lo quiere como cwtchcamping.co.uk ... cwtchcamping.co.uk un vistazo a esto:

Javascript:

$(document).ready(function() {
var menu = $(''#menu'');
var windowH = $(window).height();
var stickToBot = windowH - menu.outerHeight(true);
menu.css(''top'', stickToBot + ''px'');
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if (scrollVal > stickToBot) {
menu.css({top: ''0px'', position: ''fixed''});
}
else {
menu.css({top: stickToBot + ''px'', position: ''absolute''});
}
});
});

CSS:

#menu {
position: absolute;
}

Ejemplo: JSFiddle