sticky header yaratmaq

İstəyirəm ki, bir div yaradım və bu div-in arasında olan elementlər (şəkillər inputlar və s.) sticky header kimi görsənsin. İstifadəçi səhifəni aşağı edəndə ekranın yuxarı hissəsində yapışıb qalsın, amma istifadəçi yuxarı səhifəni yuxarını qaldıranda yox olsun. Hazır bir example olsaydı pis olmazdı

Sualı verdi: Ayxan (10/06/2015)

Yadda saxlama

CSS, header, JavaScript, jQuery, sticky. Qısa keçid.

Verilmiş cavablar və yazılan şərhlər (2 cavab var)

NModern

(11:50, 11/06/2015 ) #56112

Chrome-de mausla firladanda atdanirdi deye onunchun elave kod yazmali oldum. Yoxlayib xeber verersiniz.

1//CHROMA GORE START
2if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
3window.onmousewheel = document.onmousewheel = wheel;
4function wheel(event) {
5    $('#divmiv').css('top', $(this).scrollTop() + "px");
6}
7//CHROMA GORE END
8$(window).scroll(function() {
9    if($(this).scrollTop()<100){
10        $('#divmiv').fadeOut("slow");        
11    }
12    elseif($(this).scrollTop()>=100){
13        $('#divmiv').fadeIn("slow");            
14    }
15    $('#divmiv').css('top', $(this).scrollTop() + "px");
16});

Cavablamaq üçün sağ sütundan hesaba daxil olmaq lazımdır

Ayxan

(01:13, 13/06/2015 ) #56148

1<div id="divmiv"><h1>Salam</h1></div>
2<p>Salam</p>
3<p>Salam</p>
4<p>Salam</p>
5<p>Salam</p>
6<p>Salam</p>
7<p>Salam</p>
8<p>Salam</p>
9<p>Salam</p>
10<p>Salam</p>
11<p>Salam</p>
12<p>Salam</p>
13<p>Salam</p>
14<p>Salam</p>
15<p>Salam</p>
16<p>Salam</p>
17<p>Salam</p>
18<p>Salam</p>
19<p>Salam</p>
20<p>Salam</p>
21<p>Salam</p>
22<p>Salam</p>
23<p>Salam</p>
24<p>Salam</p>
25<p>Salam</p>
26<p>Salam</p>
27<p>Salam</p>
28<p>Salam</p>
29<p>Salam</p>
30<p>Salam</p>
31 
32 
33//CHROMA GORE START
34if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
35window.onmousewheel = document.onmousewheel = wheel;
36function wheel(event) {
37    $('#divmiv').css('top', $(this).scrollTop() + "px");
38}
39//CHROMA GORE END
40$(window).scroll(function() {
41    if($(this).scrollTop()=100){
42        $('#divmiv').fadeIn("slow");            
43    }
44    $('#divmiv').css('top', $(this).scrollTop() + "px");
45});