Video sitesi için üst menüyü sabitleme yardım

13-06-2014, 22:42:27

S'a arkadaşlar birkaç gün önce haber sitem için bu konu gibi konu açmıştım saolsun arkadaşlar yardımcı oldular şimdide video kısmı için sabit üst menü için yardım istiyorum bu konuda bana yardımcı olurmusunuz sizlere zahmet ekran görüntüsü bu

Anasayfa - kategoriler - makaleler vs olan kısımdaki menü saysfa aşağı indikçe sayfayla beraber insin istiyorum.
Web sitesi : Corumobjektif.com/video/

14-06-2014, 04:27:48

#2

EA

.fixed960 {
max-width: 1000px;
margin: 0 auto;
padding: 0;
position: fixed;
left: 0;
right: 0;
z-index: 999;
}

.wide-nav {
background-image: none;
background-color: #005580;
box-shadow: none;
border-top-color: #005580;
border-bottom-color: #005580;
margin-top:50px;
}

14-06-2014, 13:18:12

#3

KayRa CinaR

EA adlı üyeden alıntı: mesajı görüntüle

.fixed960 {
max-width: 1000px;
margin: 0 auto;
padding: 0;
position: fixed;
left: 0;
right: 0;
z-index: 999;
}

.wide-nav {
background-image: none;
background-color: #005580;
box-shadow: none;
border-top-color: #005580;
border-bottom-color: #005580;
margin-top:50px;
}

hocam yaptımda üst komple iniyor aşşağı menü çubuğuyla beraber ben sadece menü çubuğu insin istiyorum.

gibi

14-06-2014, 14:43:09

#4

rws

bunun için jquery kullanmalısın,

pencere scroll olduğunda yükselik 100px az ise normal menu göster, 100px den fazla ise sabit menu göster gibi, aksi halde pek güzel gözükmez,

farklı olarak, menuyu kapsayıcısına değilde, body tagına göre position ataması yapabilirsin

14-06-2014, 14:46:19

#5

KayRa CinaR

rws adlı üyeden alıntı: mesajı görüntüle

bunun için jquery kullanmalısın,

pencere scroll olduğunda yükselik 100px az ise normal menu göster, 100px den fazla ise sabit menu göster gibi, aksi halde pek güzel gözükmez,

farklı olarak, menuyu kapsayıcısına değilde, body tagına göre position ataması yapabilirsin

hocam valla baya uğraştım ama çözemedim yardımcı olursanız çok makbule geçer.

14-06-2014, 15:33:20

#6

yumuX

Bu jquery kodu ile yapabilirsin hocam.

$("document").ready(function(){

    $(window).scroll(function () {
        if ($(this).scrollTop() > 150) {
            $('.sabit-menu').slideDown(300);
        } else {
            $('.sabit-menu').css("display","none");
        }
    });

});

14-06-2014, 15:41:34

#7

KayRa CinaR

yumuX adlı üyeden alıntı: mesajı görüntüle

Bu jquery kodu ile yapabilirsin hocam.

$("document").ready(function(){

    $(window).scroll(function () {
        if ($(this).scrollTop() > 150) {
            $('.sabit-menu').slideDown(300);
        } else {
            $('.sabit-menu').css("display","none");
        }
    });

});

Bunu nereye koyucam

14-06-2014, 15:46:59

#8

rws

$(window).scroll(function(){
var yukseklik=$(this).scrollTop();
if(yukseklik>100){
	$('.menu').addClass('sabit');
else{
	$('.menu').removeClass('sabit');
})

bu koda göre pencere 100px aşağı kaydığında menuye; sabit class ı atayacak,100px kayma olmadığında normal gösterecek,

sabit class tanımlamasında da menuyu fixed yapabilirsiniz, position:absolute;top:0;left:0;width:100%; gibi

14-06-2014, 15:55:21

#9

KayRa CinaR

rws adlı üyeden alıntı: mesajı görüntüle

$(window).scroll(function(){
var yukseklik=$(this).scrollTop();
if(yukseklik>100){
	$('.menu').addClass('sabit');
else{
	$('.menu').removeClass('sabit');
})

bu koda göre pencere 100px aşağı kaydığında menuye; sabit class ı atayacak,100px kayma olmadığında normal gösterecek,

sabit class tanımlamasında da menuyu fixed yapabilirsiniz, position:absolute;top:0;left:0;width:100%; gibi

hocam yaptımda bu seferde footeri yokarı çıkartı uyguladığım kod şu

.fixed960 {
max-width: 1000px;
margin: 0 auto;
padding: 0;
position: fixed;
left: 0;
right: 0;
z-index: 999;
position:absolute;
top:0;left:0;
width:100%; 
}

.wide-nav {
background-image: none;
background-color: #005580;
box-shadow: none;
border-top-color: #005580;
border-bottom-color: #005580;
margin-top:50px;
}
$(window).scroll(function(){ 
var yukseklik=$(this).scrollTop(); 
if(yukseklik>100){ 
    $('.menu').addClass('sabit'); 
else{ 
    $('.menu').removeClass('sabit'); 
})