Jump to content

Archived

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

Aires

Tutorial: Resize the fixed header and logo on scroll

Recommended Posts

Aires

Hi, 

The rewards of pounding javascript and jquery into my brain. The css and script is at the end for you copy and paste. Remember to change the section id in the css and the script.

This site helped me out alot  http://overapi.com/ as well as Treehouse with a touch of Lynda.

 

Here is the screencast  http://screencast.com/t/l2tscyN7

 

 

http://i.imgur.com/O3Wwckm.png

 

 

#naviu4c633 {
  padding: 20px 0;
  -webkit-transition: padding .55s;
-moz-transition: padding .55s;
-ms-transition: padding .55s;
-o-transition: padding .55s;
transition: padding .55s;
  }

 

 

<script>
  jQuery(document).ready(function() {
    jQuery(window).scroll(function() {
      if ( jQuery(window).width() > 768) {
        if (jQuery(window).scrollTop() >= 100) {
            jQuery('#naviu4c633').css('padding', '0');
            jQuery("#naviu4c633 img").attr("src", "your url here for mini");
             } else {
            jQuery('#naviu4c633').css('padding', '20px 0');
            jQuery("#naviu4c633 img").attr("src", "large logo url");
             }
      }
    });
 });
  
</script>

 

 

~Aires


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites
batman

HI Aires

Thank you very much ! !

wpml_mail.gif


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
seanmcconkey

I've copied the code to this, and changed the appropriate urls but it just shrinks the header the "big" logo is the same as the small?

I've double checked the logo files and they are correct. Here is my code (note* the (Site) is actually the full url):

 

#naviuta2k0c {
padding: 20px 0;
-webkit-transition: padding .55s;
-moz-transition: padding .55s;
-ms-transition: padding .55s;
-o-transition: padding .55s;
transition: padding .55s;
}
 
 
<script>
  jQuery(document).ready(function() {
    jQuery(window).scroll(function() {
      if ( jQuery(window).width() > 768) {
        if (jQuery(window).scrollTop() >= 100) {
            jQuery('#naviuta2k0c').css('padding', '0');
            jQuery("#naviuta2k0c img").attr("src", "(Site)/wp-content/uploads/2015/06/sage-sm.png");
             } else {
            jQuery('#naviuta2k0c').css('padding', '20px 0');
            jQuery("#naviuta2k0c img").attr("src", "(Site)/wp-content/uploads/2015/06/sage-big.png");
             }
      }
    });
 });
  
</script>

 

Share this post


Link to post
Share on other sites
opwolken

Much appreciated for this customization Aires!

I've made a small change so that the CSS is easier to adept; now i'm able to make quick changes in background color, text color etc.

the change: .addClass & .removeClass to jQuery instead of .css():

  jQuery(document).ready(function() {
    jQuery(window).scroll(function() {
      if ( jQuery(window).width() > 768) {
        if (jQuery(window).scrollTop() >= 100) {
          jQuery('#pl_areau722a8').addClass("menu-small");
            jQuery("#pl_areau722a8 img").attr("src", "http://opwolken.com/wp-content/uploads/2015/06/bullit_40z.png");
             } else {
               jQuery('#pl_areau722a8').removeClass("menu-small");
            jQuery("#pl_areau722a8 img").attr("src", "http://opwolken.com/wp-content/uploads/2015/06/bullit_50.png");
             }
      }
    });
 });

CSS:

#pl_areau722a8 {
  padding: 20px 0;
  -webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
  }

.menu-small{
padding:0;
}

Share this post


Link to post
Share on other sites
Aires

Awesome.

Thanks for the update.  I love the site BTW.


ndTgvai.jpg

Visit iheartpagelines.com for the latest tutorials on PageLines related products.

 

Share this post


Link to post
Share on other sites

  • Similar Content

    • elementalkites
      By elementalkites+
      Good evening. I am attempting to use the Impulse section on a page I am working on (https://dev.elementalkites.com). The tool seems to have the ability to overlay a logo on top of the slider images but in my case it isn't working, even though I have added the logo file and given it a height to display at. I have attached a screenshot for reference. Any help would be appreciated.
       
       
    • lionel1
      By lionel1
      Hi,
      i try to put some images (Logos) in the Agency module / clients module section
      But i only can put 6 logos though the module propose to add more item
      Thanks for ur help
      Lionel 
      Capture d’écran 2017-06-27 à 20.55.27.png 
    • decmech
      By decmech+
      Hey Guys,
      Having some issues with the dropdowns for the Navi in DMS. For some reason I can't have any more than 2 levels in the dropdown. The cursor is hovering over RPAS Training (and the arrow to indicate more is visible) but no matter what browsers, it never shows up. Also inspecting the HTML shows that the additional fields are not there.
      I have inspected the PHP and cannot see anything that is limiting the number of levels. Any assistance to get the additional levels showing would be great.

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I just migrated from DMS to PageLines Platform 5 and noticed that after uploading my fav icon to Site Images, the default PageLines icon is still showing in my browser as well as in the HTML source code.
      The page in question is www.michaelkummer.com - is there anything else I need to do in order to update the favicon?
      Thanks
      Michael


    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
      thanks
×