Vzdolžen premik spletne strani (scroll down)

#1Pozdravljeni,

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

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

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

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

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

#5Nekaj podobnega imajo tudi Finance.si

#6Se en primer Demo

Link do tutoriala s kodo KLIK

#7OK, 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...