The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Fixed menu when scrolling

View previous topic View next topic Go down

Solved Fixed menu when scrolling

Post by IdaTR on June 28th 2017, 9:32 am

Website: vielamort.net
Problem: fixed scrollbar at the top
Version: Punbb

Hello! I want to have a fixed menu, when scrolling past the default position of it. Much like the one here on Forumotion Fora.
At the moment the menu, is just fixed at the top, as the result of my own attempt, but it doesn't work.. sadly.

Hope you can help!

Navbar:
Code:
/*-Navbar-*/
#navbar {
      background:#fff;
    color:#FFF;
    height:50px;
    padding:.5em;
    position:absolute;
    top:50px;
    width:100%;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
}
#topnav, #topnav ul {
  margin: 0;
  padding: 0;
  z-index: 999;
}
#topnav li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}
#topnav > li > a.active {
  background-color: #79D3C1;
  color: #fff;
}
#topnav > li > a {
  line-height: 50px;
  padding: 0 18px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 700;
  color: #555F67;
}
#topnav li a {
  display: block;
  text-decoration: none;
  -o-transition: all .15s ease-out;
  -moz-transition: all .15s ease-out;
  -webkit-transition: all .15s ease-out;
  transition: all .15s ease-in-out;
}
#topnav > li:hover > a {
  background: #4D5760;
  color: #fff;
}
#topnav > li {
  margin-right: 2px;
  padding-bottom: 5px;
}
#topnav li ul {
  position: absolute;
  width: 210px;
  left: -999em;
  padding: 5px 0;
  background: #4D5760;
  border-radius: 5px;
}
#topnav li:hover ul {
  left: 0;
  top: 52px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}
#topnav li li {
  width: 200px;
  height: auto;
}
#topnav li {
  float: left;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}
#topnav li li a {
  color: #fff;
  line-height: 30px;
  font-size: 13px;
}
#topnav li li a {
  display: block;
  width: 174px;
  padding: 0 18px;
  color: #fff;
  height: auto;
  float: none;
  line-height: 30px;
  font-size: 13px;
}
#topnav > li {
  margin-right: 2px;
  padding-bottom: 5px;
}
#topnav li ul {
  position: absolute;
  width: 210px;
  left: -999em;
  padding: 5px 0;
  background: #4D5760;
  border-radius: 5px;
}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul {
  left: 190px;
  top: 0;
}
#topnav ul li a:hover {
  color: #85F6F5;
}
#topnav li li {
  width: 200px;
  height: auto;
}
#topnav li:hover ul ul, #topnav li:hover ul ul ul, #topnav li:hover ul ul ul ul {
  top: -999em;
  left: auto;
}
#topnav li li:hover ul, #topnav li li li:hover ul, #topnav li li li li:hover ul {
  left: 190px;
  top: 0;
}

Java:
Code:
var num = 500; //number of pixels before modifying styles

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > num) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});


avatar
IdaTR
Forumember

Female Posts : 391
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Fixed menu when scrolling

Post by Luffy on June 28th 2017, 1:35 pm

Hello @IdaTR,

Try this Javascript instead:
Code:
$(window).bind('scroll', function () {
var num = 500; //number of pixels before modifying styles
    if ($(window).scrollTop() > num) {
        $('#navbar').addClass('fixed');
    } else {
        $('#navbar').removeClass('fixed');
    }
});

and add this css:
Code:
div#navbar.fixed {
    position: fixed;
    top: 30px;
    z-index: 999;
}

This should make your Navbar change position to fixed and then stick it up on the top once you pass the actual navbar! Wink





avatar
Luffy
Manager
Manager

Male Posts : 4635
Reputation : 469
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

Solved Re: Fixed menu when scrolling

Post by IdaTR on June 28th 2017, 6:05 pm

IT WORKS 8D <3
avatar
IdaTR
Forumember

Female Posts : 391
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Fixed menu when scrolling

Post by Draxion on June 28th 2017, 6:21 pm

@IdaTR, may I marked this as solved?


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1378
Reputation : 187
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

Solved Re: Fixed menu when scrolling

Post by IdaTR on June 28th 2017, 6:52 pm

Yes you may (:
avatar
IdaTR
Forumember

Female Posts : 391
Reputation : 1
Language : Danish, english
Location : Denmark

http://nionevrien.forumq.net/

Back to top Go down

Solved Re: Fixed menu when scrolling

Post by Draxion on June 28th 2017, 6:53 pm

Problem solved & topic archived.
Please read our forum rules: ESF General Rules


NEVER provide your founder's account or email
Please provide forum's URL when dealing with design and appearance issues
Don't forget to mark the topic as when the issue is resolved. This helps the staff greatly.
PM Support is prohibited!
TOS | General Rules | FAQ | Tricks & Tips | Latest Updates | Introduce Yourself

avatar
Draxion
Support Moderator
Support Moderator

Male Posts : 1378
Reputation : 187
Language : English
Location : USA

http://www.draxionsgameden.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum