Html and jQuery together are quite frustrating

+2 Eirik Fuckmother · December 2, 2014
Hey there, thanks for taking the time!


I'm just beginning creating simple websites using HTML, CSS and now a little dash of Javascript, but I've found the last part to be a sore pain at times.
I have a menu I want to stick to the top of the screen after scrolling (see code) which it can do pretty well, but when it does stick the bar gains about 10-15 px both on the top and bottom, for seemingly no reason at all. I hope someone could help me with this, and thank you in advance! 






Here's the code I have been using, if anyone would take the time I would be very glad:


HTML:

.menu{
background-color:#CCC;
margin-left:7%;
padding:0px;
width:15%;
position:static;
border-radius:20px;
}
.menu ul {
position:static;
text-align:center;
}
.menu li {
display:block;
margin-left:-20px;
padding-top:10px;
padding-bottom:10px;
width:100%;
}

.menu a {
text-decoration:none;
text-transform:uppercase;
color:#000000;
font-size:20px;
font-weight:bolder;
font-family: "Courier New", Courier, monospace;
}

.menu ul li a:hover {
text-decoration: underline;
color:#414141;
}

It's a template, so ignore the template-objects

CSS:

.menu{
background-color:#CCC;
margin-left:7%;
padding:0px;
width:15%;
position:static;
border-radius:20px;
}
.menu ul {
position:static;
text-align:center;
}
.menu li {
display:block;
margin-left:-20px;
padding-top:10px;
padding-bottom:10px;
width:100%;
}

.menu a {
text-decoration:none;
text-transform:uppercase;
color:#000000;
font-size:20px;
font-weight:bolder;
font-family: "Courier New", Courier, monospace;
}

.menu ul li a:hover {
text-decoration: underline;
color:#414141;
}





And finally, the javascript (Jquery, but still):

$(function(){
       
var stickyHeaderTop = $('.menu').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('.menu').css({position: 'fixed', top: '0px'});
                       
                } else {
                        $('.menu').css({position: 'static', top: '0px'});
                }
        });
  });


Again, thank you in advance!

Post a Reply

Replies

Oldest  Newest  Rating
0 Doug Fresh · December 2, 2014
you may have fudged up some copy/pasting here, I'm seeing CSS code inside the HTML code. This bit of code may be your issue.. padding is the space around the content area
.menu li {
display:block;
margin-left:-20px;
padding-top:10px;
padding-bottom:10px;
width:100%;


http://i.stack.imgur.com/PeSIJ.gif
Hope this helps!

EDIT: The css property height may also be needed to control the objects top to bottom length.
0 Nikola Novakovic · December 3, 2014
Did not read the entire thing but I am going to agree with the above post. You might also think and look into flexible box model. That is like box model on steroids :) 
0 Eirik Fuckmother · December 4, 2014
I tried screwing around with the padding on every part of the menu, put it didn't seem to really have any effect :( 
Although I do agree, the issue must lie in the padding somehow
0 david az · December 5, 2014
try to use plugin.... i also made website that u can refer to in in link below
http://www.thestraits.com.my/ 
u can not use position fix and static.. position of menu must be  relative
0 Doug Fresh · December 5, 2014
Here's a bit of code that should eliminate the re-sizing issue experienced with fixed elements. Horizontal menus seem to do much better over standalone boxes. 
Note, the JS is embedded in the HTML code. 

<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="test.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(window).bind('scroll', function() {
// this bit controls when the fixed class is triggered.
if($(window).scrollTop() > 135){
$('nav').addClass('fixed');
 
}else{
$('nav').removeClass('fixed');
}
 })
});
</script>
  </head>
  <h1></h1>
  <nav>
<div class="menu">
 <ul>
<li><a href="#">Home</a></<li>
<li><a href="#"> test</a></li>
<li><a href="#"> test 2</a></li>
 </ul>
</div>
  </nav>
  
  
  <body>
 
<main class="content">
 <i>Insert your favourite wall of text or image here</i>
</main>

</html>

 and the css: 
/*tryed to match up what you had */
/* fixed style*/
.fixed{
  position: fixed;
  top: 0;
}

/*header if necessary*/
h1{
  text-align: center;
  margin: 40px 0;
  text-transform: uppercase;
  color: #000;
}

/*Fallback nav, needed only when JS wont load and accessibility*/
nav{
  width: 10%;
  height: 110px;
}

/*Begin menu style*/

.menu{
  background-color: #ccc;
  border-radius: 25px;
  display: table-caption;
  margin: 0 -20px;
  
  z-index: 10;
}

/* style content space around links */
li{
  list-style: none;
  float: left;
  padding: 5px 10px;
  margin: 0 10px;
}

/* styles fonts for links only*/
a{
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 20px;
  font-weight: bolder;
  font-family: "Courier New", Courier, monospace;
}

/*styles actions on hover*/
a:hover{ 
  text-decoration: underline;
  color: #414141;
  }

/*control content of page if needed, */
.content {
  z-index: -999;
  margin: 2.8em;
  }
  • 1

Javascript

107,081 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators