Sizlerle css ve html kodlarının nasıl olacağını örnek olarak veriyorum. Ayrıca kullanıldığı siteye gitmek için buraya tıklayabilir, nasıl olduğunu görebilirsiniz. Örnek sitede logo ve menünün bulunduğu üst kısmı sabitleyerek, sürekli görünür halde olmasını sağladık.
Header yada Menüyü Sayfa Üstüne Sabitleme
Aşağıda menü sabitleme css kodları, menü sabitleme html kodları ve menü sabitleme js kodları mevcuttur. İnceleyerek kendi kodlarınıza kolayca ekleyebilirsiniz.
Css Kodları
body{
padding:0;
margin:0;
}
.menu{
width:100%;
height: 40px;
background-color:#000;
margin-left:auto;
margin-right:auto;
color:#fff;
text-align: center;
line-height: 40px;
}
.sabitleme{
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
width: 100%;
left:0;
right: 0;
z-index: 99999;
}
.banner{
width:100%;
height: 200px;
line-height: 200px;
text-align: center;
background-color:#efefef;
}
Html Kodları
<!DOCTYPE html>
<html>
<head>
<title>Header yada Menüyü Sayfa Üstüne Sabitleme</title>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>
</head>
<body>
<div class=”banner”> Header yada Menüyü Sayfa Üstüne Sabitleme </div>
<div class=”menu”>Sabit Kalmasını İstediğiniz Alan / Menü</div>
Lorem Ipsum Nedir?
Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
<script type=”text/javascript”>
$ (document) .ready (function () {
$ (window) .scroll (function () {
if ($ (this) .scrollTop ()> 200) {
$ (‘.menu’).addClass (‘sabitleme’);
} else {
$(‘.menu’).removeClass(‘sabitleme’);
}
});
}); </script>
</body>
<html>[/vc_column_text][/vc_column][/vc_row]
