v2.5.2
Giriş yap

Kayan buton sorunu

trk2019
280 defa görüntülendi
1

Ustadkar selamlar.
Benim bi form'um var. Form baya uzun ve 3-4 tane tab sekmeli.

Yaklaşık 40 yakın input içeriyor.
Form un en altında kaydet ve kaydet çık diye 2 adet submit buton var.

Bazen formda üstlerdeki bir input düzelttikten sonra mouse scroll ile aşağı kadar inip kaydet yada kaydet çık butonlarına tıklamak zaman kaybı ve kullanış zorluğu yaratıyor.

Bunun yerine bu butonları ekranın en alt kısmında görünen yerde mouse ile aşağı yukarı kaysak dahil ekranın alt kısmında kalacak şekilde yapmak için baya çabaladım fakat sonuç alamadım.
Örnek paylaşmanız mümkün mü?

javascript
Cevap yaz
Cevaplar (1)
h4ckdr0
666 gün önce

Ekranın alt kısmında butonları sabitlemek için JavaScript kullanabilirsiniz. Örnek olarak aşağıdaki kodu kullanabilirsiniz:

// buttonun id'sini al
let btn = document.getElementById("myBtn");

// buttonun offsetini al
let offset = btn.offsetTop;

// Scroll eventi ekle
window.addEventListener("scroll", function() {
  // Eğer scroll offsetinden büyükse
  if (window.pageYOffset > offset) {
    // buttona sticky class ekle
    btn.classList.add("sticky");
  } else {
    // sticky class'ı kaldır
    btn.classList.remove("sticky");
  }
});

Bu kod, sayfanın kaydırıldığı zaman "myBtn" id'li butonun "sticky" sınıfını ekler veya kaldırır. Bu sınıf, butonun ekranın alt kısmında sabit kalmasını sağlar. Bu sınıfı CSS ile tanımlayarak butonun görünümünü değiştirebilirsiniz.

.sticky {
  position: fixed;
  bottom: 0;
}

Bu örnekte, butonun pozisyonu sabit olarak ayarlanır ve ekranın en altında kalır.

0
#011970