Kære udviklere,
Jeg er nu endelig ved at have sat min blog-hjemmeside op, og har nu lidt små-problemer med nogle jQuery effekter jeg er ved at lave til min header.
Kort sagt vil jeg have at min header bliver skjult når man scroller ned på siden, samt bliver vist når man scroller op igen. Den skal så sætte sig på plads igen når man er scrolled op til toppen på siden, og jeg har næsten fået det lavet helt perfekt.
Eksemplet kan ses på
hjemmesiden.
Jeg har skrevet scriptet i jQuery, som vist her:
- var lastScrollTop = 0,
- header = $( '.site-header' ),
- hheight = header.height(),
- content = $( '.site' );
-
- $(window).scroll(function() {
- var st = $(this).scrollTop();
-
- if( st > hheight ) {
- if( st < lastScrollTop ) {
- if( !header.hasClass('fixedscroll') ) {
- header.addClass('fixedscroll');
- headerOpen();
- }
-
- if( header.hasClass('headerclose') ) {
- header.removeClass('headerclose');
- headerOpen();
- }
-
- header.addClass('headeropen');
- } else {
- if( !header.hasClass('fixedscroll') ) {
- header.addClass('fixedscroll');
- headerClose();
- }
-
- if( header.hasClass('headeropen') ) {
- header.removeClass('headeropen');
- headerClose();
- }
-
- header.addClass('headerclose');
- }
- } else {
- headerReset();
-
- if( header.hasClass('headeropen') ) {
- header.removeClass('headeropen');
- }
-
- if( header.hasClass('headerclose') ) {
- header.removeClass('headerclose');
- }
- }
-
- lastScrollTop = st;
- });
-
- function headerOpen() {
- var top = $("#wpadminbar").length ? "32px" : "0";
-
- header.stop().animate({
- top: top,
- }, 'fast').css({ position: 'fixed' });
-
- content.css({
- paddingTop: hheight
- });
- }
-
- function headerClose() {
- var top = $("#wpadminbar").length ? "-84px" : "-52px";
-
- header.stop().animate({
- top: top,
- }, 'fast').css({ position: 'fixed' });
-
- content.css({
- paddingTop: hheight
- });
- }
-
- function headerReset() {
- header.css({
- top: "0px",
- position: 'static'
- }).removeClass('fixedscroll');
-
- content.css({
- paddingTop: 0
- });
- }
Problem: Når man scroller cirka 52 pixel ned på siden kommer effekten, dog "hopper" den og forsvinder. Det kan nemt ses. Man skal blot scrolle de antal pixels ned på siden som svarer til headeres højde. Det samme sker når man gør det den modsatte vej, altså scroller op på siden til mindre end cirka 52 pixel (headerens højde).
Jeg vil gerne have det gjort således at når man scroller ned på siden (headerens højde) slider headeren væk fra billedet, som den allerede gør. Bare uden den hopper. Og det samme den anden vej. Jeg håber at I forstår mit problem, og jeg håber at der er nogen der kan komme med et tip eller hjælp :-).