CSS Kaydırınca simge çıkması

CSS
1

Merhabalar, ben bir site kodluyorum ve ekranın sol altına

#item {
    position: fixed;
    bottom: 5vw;
    left: 5vw;
}

ile bir item oluşturdum ve istiyorum ki bu item sadece aşağı doğru kaydırınca çıksın. Şu an CSS, Bootstrap ve HTML dışında web ile alakalı bir şey bilmiyorum. JS bilmeden yapılabilir mi ya da copy paste yaparsam nasıl yapabilirim?

Şimdiden herkese çok teşekkür ederim :)
2

Merhaba,

Aşağıdaki kodu çalıştırdığınızda istediğiniz davranışı elde edebiliyor musunuz?

<!DOCTYPE html>
<html>
    <body></body>
    <div id="bottom-bar"></div>
    <style>
        body {
            height: 5000px;
        }
        #bottom-bar {
	        position: fixed;
	        bottom: 0;
	        left: 0;
	        right: 0;
	        height: 5%;          
            background-color: #000000;
            display: none;
        }
    </style>
    <script>
        var position = window.scrollY;
        document.body.onscroll = function() {
            if (window.scrollY > position) {
                document.getElementById("bottom-bar").style.display = "block";
            } else {
                document.getElementById("bottom-bar").style.display = "none"; 
            }
            position = window.scrollY;         
        };
    </script>
</html>
1 Beğeni
3

Evet, çok teşekkür ederim bir de gözükmenin daha yumuşak olması için bir şeyler eklemek çok zahmetli olur mu?

4

Yoo, zahmeti olmaz.

jQuery kütüphanesi ile yapabilirsiniz.

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>    
    </head>
    <body></body>
    <div id="bottom-bar"></div>
    <style>
        body {
            height: 5000px;
        }
        #bottom-bar {
	        position: fixed;
	        bottom: 0;
	        left: 0;
	        right: 0;
	        height: 5%;          
            background-color: #000000;
            display: none;
        }
    </style>
    <script>
        var position = window.scrollY;
        document.body.onscroll = function() {
            if (window.scrollY > position) {
                $("#bottom-bar").fadeIn();
            } else {
                $("#bottom-bar").fadeOut();
            }
            position = window.scrollY;         
        };
    </script>
</html>