Bonjour la communauté,
depuis plusieurs jours je travaille sur la création de mon portfolio mais je bloque sur la réalisation d'un menu sticky ( qui passe en position : fixed lors du scroll de la page ). Le truc c'est que j'ai essayé plusieurs type de codes jquery qui ne sont jamais les mêmes, j'aimerai avoir de l'aide pour pouvoir le réaliser correctement merci !
Voici le code pour mon menu :
HTML
<div id="Sitetop">
<nav class="menu">
<a href="#section1">Accueil</a>
<a href="#section2">A propos</a>
<a href="#section3">Mes compétences</a>
<a href="#section4">Mes créations</a>
</nav>
</div>
CSS
html,body{
margin: 0;
padding: 0;
background-image: url(bg.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
}
#Sitetop{
position: absolute;
top: 88%;
left: 0;
width: 100%;
z-index: 9999;
height:80px;
background-color:white;
text-align:center;
font-family:"911Fonts.com_CenturyGothicRegular__-_911fonts.com-fonts-mhpY";
}
#Sitetop a{
text-decoration:none;
padding: 30px;
line-height: 80px;
color:black;
font-size: medium;
}
#Sitetop a:hover,#Sitetop a:focus, #Sitetop a:active{
text-decoration: none;
color:white;
background: ;
transition: 0.5s;
}
JS
<script type="text/javascript" src="jquery-3.1.1.min"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).scroll(function(){
console.log($(this).scrollTop());
if($(this).scrollTop()>25){
$('#Sitetop').css({
'position':'fixed', 'top':'0px'});
}else{
$('#Sitetop').css({
'position':'absolute'});
}
})
})
</script>
depuis plusieurs jours je travaille sur la création de mon portfolio mais je bloque sur la réalisation d'un menu sticky ( qui passe en position : fixed lors du scroll de la page ). Le truc c'est que j'ai essayé plusieurs type de codes jquery qui ne sont jamais les mêmes, j'aimerai avoir de l'aide pour pouvoir le réaliser correctement merci !
Voici le code pour mon menu :
HTML
<div id="Sitetop">
<nav class="menu">
<a href="#section1">Accueil</a>
<a href="#section2">A propos</a>
<a href="#section3">Mes compétences</a>
<a href="#section4">Mes créations</a>
</nav>
</div>
CSS
html,body{
margin: 0;
padding: 0;
background-image: url(bg.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
}
#Sitetop{
position: absolute;
top: 88%;
left: 0;
width: 100%;
z-index: 9999;
height:80px;
background-color:white;
text-align:center;
font-family:"911Fonts.com_CenturyGothicRegular__-_911fonts.com-fonts-mhpY";
}
#Sitetop a{
text-decoration:none;
padding: 30px;
line-height: 80px;
color:black;
font-size: medium;
}
#Sitetop a:hover,#Sitetop a:focus, #Sitetop a:active{
text-decoration: none;
color:white;
background: ;
transition: 0.5s;
}
JS
<script type="text/javascript" src="jquery-3.1.1.min"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).scroll(function(){
console.log($(this).scrollTop());
if($(this).scrollTop()>25){
$('#Sitetop').css({
'position':'fixed', 'top':'0px'});
}else{
$('#Sitetop').css({
'position':'absolute'});
}
})
})
</script>