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+    80
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    1,327
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+    80
jmad

Thanks.  I'll work on it.

Share this post


Link to post
Share on other sites
jmad+    80
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    1,327
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+    80
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

    • 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,
    • 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,
    • khat
      By khat+
      I think I may have installed pagelines pro incorrectly, and then used features incorrectly. I installed first platforms framework theme and then the child, thinking I could do setup for child later. I tried to set up a background image, and tried custom css feature in pagelines dashboard. I had mistakes in my css, and just thought that if I deleted the info in the css custom feature in pagelines dashboard that the new information would overwrite the old info. The background image didn't respond at all, probably because I didn't have the child directory renamed. I then tried to use the LSS plugin to create css and added more css, possibly, somewhere -sigh-. I never did change the background image and get it placed properly. I used a workaround and in nested containers I placed a background image which worked well enough, so I moved on to try to create my nav bar/ menu bar. When I go to the Menus panel, there is NO area where I can place a menu on a page. I have read and reread and re- re- reread the instructions for placing a menu. I've used the pagelines editor to place a menu, however only HOME shows up. I've been at this for many hours. I've since uninstalled all of my pagelines items and reinstalled, thinking that it would restore all my changes to default, but no, it is still all there, with all my unresolved issues. I am completely at a loss as to what to do next.
    • bnapoli
      By bnapoli+
      http://731.34b.myftpupload.com/ this website is using the NavPro navigation in Platform 5. It has a lot of menu items, so it breaks to two lines when the window is sized down. What is the media query to make the navigation either a) switch to "mobile mode" at a higher width, or b ) expand the nav into two lines. Thanks
×