The “Hide div before scrolling” codes does not work no matter what

3 Views

I’m building a local website on the Bitnami WordPress Stack with the Arras theme, if that’s important.

I’m making a fixed menu that I want to show after I have scrolled 190 pixels down on the page. The problem is that anything works, no matter which JQuery or JavaScript code I try. I have searched and searched here on StackOverflow, and I know that this question have been asked numerous times here before – but I have tried every code I could find, and none works. This is my JavaScript/JQuery/HTML/PHP code for my menu, placed in the header.php file:

Read More
<div class="medfolg" id="medfolg">
<script type="text/javascript">
    $(document).ready(function(){
      $(window).bind('scroll', function(){
        if($(window).scrollTop() > 190){
            $('#medfolg').show();
        } else {
            $('#medfolg').hide();
        };
      });
    });
</script>
<?php 
if ( function_exists('wp_nav_menu') ) {
    wp_nav_menu( array( 
        'menu' => 'medfolg',
        'menu_class' => 'sf-menu'
    ) );
}   
?>
</div>

And this is the CSS code I have placed in my default.css file: 

#medfolg.medfolg {position:fixed;}
#medfolg  { text-transform: lowercase; position: absolute; top: 0; width: 100%; background: #f5f5f5; z-index:5000; display: none;}
#medfolg .menu-medfolg-container { width: 980px; margin: 0 auto; }
#medfolg .sf-menu { position: relative; top:3px !important; }
#medfolg .sf-menu a  { font-size: 22px; color: #444; margin-right: 15px;}

I desperately need some help – please!

EDIT: I’ve made a jsFiddle here with only small modifications (WordPress .php menu cannot be read on other places than WordPress): http://jsfiddle.net/wHMjr/

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. For completeness, I will post my code:

    First, the code is wrapped with a self-executing function to prevent conflict between libraries:

    (function($){
    //code goes here, now $ is a local reference to the jQuery object.
})(jQuery)

    Then, I create the handler:

    var setMenuVisibility = function(){
    if($(window).scrollTop() > 190){
        $('#medfolg').show();
    } else {
        $('#medfolg').hide();
    };
}

    which will be attached to the window’s scroll event and change the menu’s visibility according to the scroll status.

    The attachment is done by binding the function to the event:

    $(window).bind('scroll', setMenuVisibility);
//and set the initial visibility
setMenuVisibility();

    The last line in the above section sets the initial state of the menu, as it is possible that the initial scroll value would require it to be visible (e.g, a link to a lower subsection of the page).

    The entire process is initiated when the document’s markup is ready.

    See demo here.

  2. Try using vanilla js instaead of $(window).scrollTop() try window.scrollY > 190

    for the complete function I would use toggle too so:

    jQuery

        //Use jQuery to make sure we are using correct function
    jQuery(window).on('scroll', function () {
        var el = jQuery('#medfolg');
        if (window.scrollY > 100) {
            el.show(); //Use this to toggle element visibility
        } else {
            el.hide()
        }
    });

    HTML

    <div style="display:none" id="medfolg">
    <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">Tutorials</a>
        </li>
        <li><a href="#">Articles</a>
        </li>
        <li><a href="#">Inspiration</a>
        </li>
    </ul>
</div>

    Demo