Vzdolžen premik spletne strani (scroll down)

7 naročnikov

Pozdravljeni,

Na večih spletnih straneh sem opazil tehniko premikanje spletne strani, kjer ko "scroll-aš" spletno stran se glavna vsebina pomika za npr. menu. Za boljšo predstavo sem podal povezavo, kjer je uporabljena ta tehnika.

Povezava: http://www.zurnal24.si/ in http://www.yaypaul.com/

Zanima me, če se jo je kdo že poslužil in na kakšen način se to implementira. Preko google iskalnika nisem našel nič kaj uporabnega.

Lp, scale

http://www.w3schools.com/cssref/pr_background-attachment.asp

Uporabi background-attachment. Ne rabiš ničesar razen 1 preproste linije.

Tehnik je seveda več. Najpreprostejši način pa je s CSSovim pozicinoiranjem position: fixed;

Tole je moj primer gongkoncert.com. Poglej css za header in vse ti bo jasno.

Nekaj podobnega imajo tudi Finance.si

Se en primer Demo

Link do tutoriala s kodo KLIK

OK, prilepil si 2 različici te ideje. Pri yaypaul.com je to enostaven postion-fixed na celotnem "headerju" (nothing fancy here). Pri zurnalu je malo drugače. Namreč, header se začne pomikati z oknom šele takrat ko dovolj "poskrolaš" navzdol in ga nekako "vzameš s seboj". Implementacije je malce drugačna ni pa komplicirana...

za header (oziroma katerkol div) imas pripravljena 2 styla, primarni je position-relative(lahko je absolute ali karkoli je pač potrebno), sekundarni style pa ima position-fixed.

s pomočjo JS(lahko tudi jQuery) potem določiš, da ko bo scroll vrednost dosegla neko cifro, bo header prevzel sekundarni style, in obratno.

nekako takole bi se sam lotil zadeve

$(document).ready(function() {

var top = $('#nav').offset().top;

$(window).scroll(function(){
//kolk je y od scrola
var y = $(window).scrollTop();

//ali je pod headerjem
if(y >= top) {
//dodaj fixed
    $('#nav').addClass('fixed');
//ce je manj pa odstrani fixed
} else {
    $('#nav').removeClass('fixed');
}   
});

});

potrebješ jQuery...