Jump to content

Archived

This topic is now archived and is closed to further replies.

jmad

Lock Section or Nav to top

Recommended Posts

jmad

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
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

Thanks.  I'll work on it.

Share this post


Link to post
Share on other sites
jmad

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
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
jmad

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

  • Similar Content

    • Liv Kundalini
      By Liv Kundalini+
      Hi -
      Pulling my hair out over here, and would love an assist!
      Site I am building, http://www.livkundalini.com/home, has a problem with the submenu items in the nav not appearing. 
      If anyone wants to see what the Nav should look like, feel free to look in the footer on the left hand side.
      Have tried disabling Pagelines and using the twentyseventeen theme, but problem persists.
      Saw this error (pasted at the bottom of this post) displaying in the inspector, and saw discussion of Jetpack potentially being a culprit. Disabled Jetpack, but the problem persists.
      Had the hosting company even flush the server-side cache, but no avail.
      Any thoughts? Please? It's the only thing keeping me from launching this site!
      Many Thanks,
      Todd
       
      WebSocket connection to 'wss://public-api.wordpress.com/pinghub/wpcom/me/newest-note-data' failed: Error during WebSocket handshake: Unexpected response code: 403   O @ (index):7
    • russe-intensif
      By russe-intensif+
      Hi team,
      checking my site today, i'm surprised to see my MegaNav all in bottom of the pages, while it's in header.
      After getting to change it in couple of pages onto Template part (too time consuming !), i'm desperate and ask you for help :-)
      apprendre-le-russe-avec-ania.fr
      Thank you in advance !

    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • kwaoru
      By kwaoru
      Hi,
      After I installed platform 5, a Scroll Nav stopped working properly. It stopped following down as I scroll down the screen and it is very frustrating....
      I tried to add a new Scroll Nav, deactivated platform 5 or whatever I could think of to refresh to get the function back but nothing works out...
      Please please please help me wise folks out there!
      Thanks,
×