0

I have a bar at the top of my page. When a user scrolls past 700 px jquery will put the formerly hidden logo into the bar using this code:

$(window).scroll(function(){
    var posFromTop = $(window).scrollTop();

    if(posFromTop > 700){
    $('#logo').fadeIn(200, function(){
    });

    } else {
    $('#logo').fadeOut(200, function(){
    });
    }
});

That works great, but I have a link in that bar that gets pushed down when the #logo appears. How can i prevent the link from moving when the #logo appears.

Link code: 

<div class="container-fluid" style='height: 50px; background-color:rgba(242, 244, 247, 0.5); width: 100%; position: fixed; top: 0; left: 0; z-index: 30;'>
<a href='#' id='logo' style='font-size: 40px;'>logo</a>
<a href='#t' style='position: absolute; right: 12px;'>Start</a>

Logo code:

#logo{
display: none;
}
user176105
  • 211
  • 1
  • 4
  • 23

2 Answers2

0

You need position: absolute on the logo to prevent it from affecting other content.

Brandon Gano
  • 6,430
  • 1
  • 25
  • 25
  • sure except i can't figure out how to scroll in js fiddle http://jsfiddle.net/PwX93/ – user176105 Jul 25 '14 at 05:15
  • It doesn't move in at least Chrome, Firefox, or IE11. Here's an updated fiddle with `
    ` tags to allow scrolling: http://jsfiddle.net/PwX93/1/.     – Brandon Gano Jul 25 '14 at 05:17
  • yeah you're right. i updated my code. maybe it has something to do with the fact that the bar has a `fixed` position – user176105 Jul 25 '14 at 05:21
0

Before doing all the script work, first keep both element visible and align the way it has to be and then execute script.

prakashstar42
  • 677
  • 1
  • 6
  • 16
  • could you elaborate. why would i want to keep the logo visible? – user176105 Jul 25 '14 at 05:16
  • Issue is not because of scroll event, but it is html/css issue. If you keep both #logo and link visible you will get the same issue what happend when you call scroll event. So you can fix the issue first then turn #logo to hidden state and then execute your script. – prakashstar42 Jul 25 '14 at 05:27
  • im sorry i still don't understand. could you provide some code? – user176105 Jul 25 '14 at 05:31