d2jsp
Log InRegister
d2jsp Forums > Off-Topic > Computers & IT > Programming & Development > How To Solve This Little Problem ? > Offer Fg
Add Reply New Topic New Poll
Views: 570Replies: 9Track Topic
Member
Posts: 6,420
Joined: Jan 27 2008
Gold: 1,327.99
#1
Oct 17 2012 09:03am
Hi everybody, i have a little problem that i can't solve.

I have a menu fixed by css/java which start scroll only when the scrollbar is at the same level. It's working but i don't know why when the menu starts scrolling, it jumps 3 lines on the bottom. The code look like this :

CSS
Code
#example { height: 50px; background-color: rgba(255,255,255,0.9); width: 950px; }
#example.floatable { position: fixed; top: 0; }


HTML
Code
<ul>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
</ul>

<div id="example">Fixed menu</div>

<ul>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
 <li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li><li>Lorem ipsum</li>
</ul>


JAVA
Code
var positionElementInPage = $('#example').offset().top;
 $(window).scroll(
  function() {
   if ($(window).scrollTop() >= positionElementInPage) {
    $('#example').addClass("floatable");
   } else {
    $('#example').removeClass("floatable");
   }
  }
 );


If someone have an idea.
Member
Posts: 827
Joined: Jan 16 2012
Gold: 0.00
Warn: 10%
#2
Oct 17 2012 09:06am
I've posted in your other thread.

"What do you mean by "jump 3 lines to the bottom"? I tested the source here and it worked as expected. Used google chrome."
Member
Posts: 6,420
Joined: Jan 27 2008
Gold: 1,327.99
#3
Oct 17 2012 09:55am
Quote (StormHasHe @ Oct 17 2012 03:06pm)
I've posted in your other thread.

"What do you mean by "jump 3 lines to the bottom"? I tested the source here and it worked as expected. Used google chrome."


I tested it on Safari, Firefox and Chrome, and it's the same on the three, if you watch the background of the div "example" is a bit transparent, at the exact moment when this div start scrolling, stop scroll and you'll see behind the background there is already 3 lines scrolled.
Member
Posts: 6,420
Joined: Jan 27 2008
Gold: 1,327.99
#4
Oct 18 2012 03:40pm
Bump
Member
Posts: 6,420
Joined: Jan 27 2008
Gold: 1,327.99
#5
Oct 19 2012 01:19pm
Bump
Member
Posts: 6,420
Joined: Jan 27 2008
Gold: 1,327.99
#6
Oct 22 2012 02:55am
Bump
Member
Posts: 827
Joined: Jan 16 2012
Gold: 0.00
Warn: 10%
#7
Oct 22 2012 08:12am
I don't know if it's only me, but I still didn't get the problem. It's working fine here
Member
Posts: 4,582
Joined: Nov 24 2003
Gold: 9,950.00
#8
Nov 6 2012 11:28am
The reason that it "jumps 3 lines" is due to the manner in which you're switching the positioning of the #example div. Since #example is set to 50px height initially, and is basically taking up 50px of vertical space between the two unordered lists, so once you assign "position: fixed" to the #example div during the scroll, that 50px of vertical space is basically removed from between the <ul> content which is causing the "3 line jump" (really it's 50px.)

So, if you want to maintain that 50px vertical space between the two <ul> content after setting the #example to fixed position, then you're going to need to add some additional script in order to preserve that 50px of space somehow - either add a margin-bottom: 50px to the first <ul> when your action is fired or create a 50px height div to replace the space when your action is fired.

Here's a JSFiddle example: http://jsfiddle.net/4a25P/
Member
Posts: 3,434
Joined: Oct 12 2008
Gold: 4,405.51
#9
Nov 16 2012 09:16am
Quote (BroKeN.sKy @ 6 Nov 2012 15:28)
The reason that it "jumps 3 lines" is due to the manner in which you're switching the positioning of the #example div. Since #example is set to 50px height initially, and is basically taking up 50px of vertical space between the two unordered lists, so once you assign "position: fixed" to the #example div during the scroll, that 50px of vertical space is basically removed from between the <ul> content which is causing the "3 line jump" (really it's 50px.)

So, if you want to maintain that 50px vertical space between the two <ul> content after setting the #example to fixed position, then you're going to need to add some additional script in order to preserve that 50px of space somehow - either add a margin-bottom: 50px to the first <ul> when your action is fired or create a 50px height div to replace the space when your action is fired.

Here's a JSFiddle example: http://jsfiddle.net/4a25P/


This
Member
Posts: 4,605
Joined: Sep 15 2011
Gold: 9,464.00
#10
Nov 16 2012 02:48pm
Quote (xFirewalkerx @ Nov 16 2012 08:16am)
This


Worthless post is worthless.
Go Back To Programming & Development Topic List
Add Reply New Topic New Poll

© 2003-2026 d2jsp  Contact