Şimdi Ara

Header Bölümü Süreli Sabitleme

Daha Fazla
Bu Konudaki Kullanıcılar: Daha Az
3 Misafir (1 Mobil) - 2 Masaüstü1 Mobil
5 sn
17
Cevap
0
Favori
752
Tıklama
Daha Fazla
İstatistik
  • Konu İstatistikleri Yükleniyor
0 oy
Öne Çıkar
Sayfa: 1
Giriş
Mesaj
  • Arkadaşlar Selamun aleykum

    Sabit olan header bölümümün aşağı kaydırınca 5 saniye sonra gizlenmesini istiyorum. Yani sürekli kaydırsamda sabit bir header bölümüm var. Bunun 5 saniye sonra gizlenmesini hangi kodla yapabilirim.



  • javascript ile ;

    <script>
    "use strict";

    (function () { -- ilk yüklemede 1 defaya mahsus çalışacak fonksiyon.
    window.setTimeout(headerGizleFonk, 5000);
    }());

    function headerGizleFonk() {
    const header = document.getElementById("header"); -- header değişkene atama

    header.style.display="none"; --javascript ile gizleme
    $(header).slideUp(); -- jquery ile gizleme
    }
    </script>
  • Teşekkür ederim ama kod çalışmıyor yada ben eksik yapıyorum.

    Header id'im "fixed-header32" giriyorum ama herhangi bi etki yapmıyor.
  • jquery ile gizleme yapıyorsan jquery eklemen gerekir sayfaya.

    head bölümüne :
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>

    bunu ekleyerek jquery eklemiş olursun.gizleme kısmını da body nin altına veya harici js dosyasına yazman gerekir.
  • Kod çalışıyor çok teşekkür ederim fakat header 5 sn sonra komple gizliyor :D

    Benim istediğim header üst bölümünde yani en yukarı çıkınca dursun aşağı indiğim zaman sayfayı takip ederken 5 sn sonra gizlensin
  • scroll olayı kullanman gerek.sana kod yolluyorum
  • chnkyn kullanıcısına yanıt
    Çok teşekkür ederim bekliyorum.
  • süreden ziyade istediğini karşılayacak kodlar.

    let header = document.getElementById("fixed");
    let scrollTop;
    $(window).scroll(function () {
    scrollTop = window.scrollY;

    if (scrollTop <= 100)
    {
    $(header).slideDown();
    }
    else if (scrollTop > 100)
    {
    $(header).slideUp();
    }
    }

    scroll değeri 100 den küçük ise yani üste geldiyse görünür, 100 den büyük ise gizlenir.
  • senin dediğin gibi olması için ;
    sayfa yüklenince 5 saniye sonra gizlersin
    ama ne zaman göstereceksin ?

    tekrar göstermeyi yine scroll olayına bağlayabilirsin.
    -5 saniye sonra gizlendi.
    -gizlendikten hemen sonra veya bir kaç saniye sonra scroll olayı eklersin.scroll olayında scroll değerini kontrol edersin.tıpkı örnekteki gibi.100 den az ise yukarda demektir ve headerı gösterirsin.

    - buradaki sorun kullanıcı bu süre zarfında belki de hiç aşağıya gelmemiştir.durduğu yerde önce gizleyip sonra göstermiş olursun.
  • chnkyn kullanıcısına yanıt
    Evet demek istediğini anladım fakat scroll'a duyarlı olarak değiştirdim kodları süreli olanı sildim, herhangi bir gizleme olayı olmadı.
  • olabilecek nedenler

    - jquery eklememiş olabilirsin
    - harici dosyasına yazmış olabilir ve bu harici dosyayı head bölümünde çağırıyor olabilirsin

    1'in cevabı jquery eklemek
    2'nin cevabı ;
    <script src"***" defer="defer"></script> çağırdığın yere defer="defer" veya sadece defer eklemek.bu sayfa yüklendikten sonra dosyayı çağırır.
    2. çözüm olarak jquery eklediysen;
    js dosyanın içindeki tüm kodları döküman yüklendikten sonra çağır.

    $(function(){
    "use strict";

    javascript dosyandaki tüm kodları bu fonksiyon içine al.

    }
  • chnkyn kullanıcısına yanıt
    Kodu aşağıdaki şekilde ekledim ama çalışmıyor. Kütüphanenin en son sürümü websiteme çağırılık zaten.

    <script>
    $(function(){
    "use strict";
    let header = document.getElementById("fixed-header32");
    let scrollTop;
    $(window).scroll(function () {
    scrollTop = window.scrollY;

    if (scrollTop &lt;= 100)
    {
    $(header).slideDown();
    }
    else if (scrollTop > 100)
    {
    $(header).slideUp();
    }
    }
    }
    </script>
  • bir labela scroll olayındaki scrolltop değerini yazdırır mısın? değişiyor mu?
    ayrıca kodda < işareti yerine &lt; çıkıyor.bu kodunda da böyle mi yoksa burada mı böyle görünüyor.
  • chnkyn kullanıcısına yanıt
    zamanını çalıyorum çok yardımcı oluyorsun teşekkür ederim.

    <script>
    $(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
    $('.fixed-header32').fadeOut();
    } else {
    $('.fixed-header32').fadeIn();
    }
    });
    </script>

    Bu kodla hallettim. Bir sorum var bu koda ekstradan mouse üzerine gelincede göstersin diye bir komut ekleyebilir miyim?
  • headerı gizliyorsun.mouse ile gösterebilmek için headerı değil içindekileri gizle.header background transparent yaparsın.sonra header'a

    const icindekiler=...; -- içindekileri seçersin

    $(header).hover(function(){ --hover fonksiyonu
    $(icindekiler).slideDown();
    },function(){ -- over fonksiyonu."," ile ayrılır.
    $(icindekiler).slideUp()
    })


    ayrıca kodların tam bağımsızlığı için kodlara özen gösterin.
    css ve javascript selectorlerini ayırın.

    fixed-header32 classını sadece css selectorlerinde kullanın.
    javascript için de js-fixed-header32 classı gibi bir class ekleyin.javascript ile işlemlerde bu classa erişin.

    başka bir tavsiye oocss ve bem mimarilerini gözeterek yazın :)



    < Bu mesaj bu kişi tarafından değiştirildi chnkyn -- 22 Temmuz 2019; 3:30:57 >
  • çok teşekkür ederim. Hakkını helal et.

    Bir tane daha en önemli konuyu açtım.
    https://forum.donanimhaber.com/ios-ve-macos-ta-tam-ekran-sorunu-yardimci-olur-musunuz--139213942

    ne yapsam halledemedim. Bilgin varsa o konuyada el atar mısın?
  • 
Sayfa: 1
- x
Bildirim
mesajınız kopyalandı (ctrl+v) yapıştırmak istediğiniz yere yapıştırabilirsiniz.