0

I am building a website for one of my clients. I'm using JQuery to determine wether the browser should show a navigation bar.

This is a part of the code:

var screenWidth = screen.width;
var windowHeight = screen.height;

$(window).scroll(function(){
        if (screenWidth > 1000){
            if($(window).scrollTop() > windowHeight - 201){
                if($(window).scrollTop() > 1700){
                }
                else{
                    $("#follownav").slideDown("fast");
                    $('#follownav').removeClass('hide').addClass('show');
                    if($('#map').attr('src') == 'https://mapsengine.google.com/map/u/0/embed?mid=zwL1aHJX3CX8.kPfcbg2dKR-o') {
                    }
                    else {
                        $('#map').attr('src', 'https://mapsengine.google.com/map/u/0/embed?mid=zwL1aHJX3CX8.kPfcbg2dKR-o');
                    }
                } 
            }
            else{
                $("#follownav").slideUp("fast");
            }
        }
    });

When the browserwindow is above 1000 pixels the code works fine, but if I get under 1000px the navigation bar gets stuck in a loop.

Here is my website with the example of what I mean. (only works when you scale the browser down and then start scrolling)

http://www.vnsp.be

I hope someone can help me fix this problem.

NotBramKorsten
  • 304
  • 1
  • 13
  • Shouldn't you use window width instead of screen width? http://stackoverflow.com/questions/3437786/how-to-get-web-page-size-browser-window-size-screen-size-in-a-cross-browser-wa – Ihor Deyneka Aug 13 '14 at 10:14

1 Answers1

1

It looks to me like screenWidth isn't set properly or doesn't update when the browser is resized. That would make sense because you are setting it in the initialize function. Why not just refer to screen.width instead of storing that in your own variable?

Edit, same thing with windowHeight.

Jacob
  • 153
  • 5