• 0
Sign in to follow this  
Followers 0

Lock Section or Nav to top


Question

Posted · Report post

I've started trying to lock a section into place after it reaches the top of the page.  I've researched this, taken a couple quick Java/PHP intro courses and this seems simple enough but I can't get it to work.  I've added the following to the functions.php in the child theme and then this CSS.  Basically, nothing happens.  Through some other changes I managed to get the section to stick but it was cutoff in the middle of page...

 

.fixeda {
    position: fixed; 
    top: 0; 
    height: 202px; 
    z-index: 1;
}

 

 

Any help resolving this is appreciated. 

 

<?php

 

add_action( 'wp_footer', 'fixed_menu_onscroll' );
 
function fixed_menu_onscroll()
{
?>
<script>
   $(document).ready(function(){
       $(window).bind('scroll', function() {
       var navHeight = $( window ).height() - 70;
             if ($(window).scrollTop() > navHeight) {
                 $('#pl_areaunumber').addClass('fixeda');
             }
             else {
                 $('#pl_areaunumber').removeClass('fixeda');
             }
        });
    });
</script>
<?php
}

 

 

Share this post


Link to post
Share on other sites

5 answers to this question

  • 0

Posted · Report post

Thanks.  I'll work on it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You do not add scripts like that, you need to enqueue following the WordPress standards. If that doesn't work, then you will probably want to try following the instructions on this guide and see if that works.

 

http://www.sutanaryan.com/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/

 

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I had a suggestion that this would be better and more reliable accomplished by placing two menus on the the page and layering them using z-index.  Would this be a smart approach to this in DMS?  If this strategy works what is the base z-index of the sections?  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

As far as I am aware some sections do not use z-index. However, NavBar is 50 if my memory serves me correctly. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Be great if the option to lock/fix ON SCROLL a navigation or any section was available in DMS and options for if it should be locked on mobile.  Yes, Danny I know you don't like fixed nav on mobile but on longer scrolling pages, clients seem to like it.  

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0