Need help displaying small sticky company logo in upper left when scrolling

egoselfaxis
egoselfaxis used Ask the Experts™
on
I'm currently working on a custom WordPress site that has a sticky menu enabled, meaning that when you scroll about 100px or so down the page, the menu then remains fixed to the top of the browser.  You can see it in action here:

http://dev.movingpicture.com/

Although I'm satisfied with the way the sticky menu is working, I would also like to reveal a small company logo in the upper lefthand corner, about 50px from the left edge, and about 25px from the top.  The logo should only be revealed only after the user has scrolled about 180px or so down the page, and should otherwise always be hidden.

Could anyone here help me achieve this?  The WordPress theme is loading the jQuery library, so I'm open to solutions that utilize it, along with whatever custom CSS might be needed.

Thanks,
- Yvan

p.s. I would prefer to implement this as something custom, rather than having to experiment with different WordPress plugins, as I have already tried a variety of different plugins (unsuccessfully).
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
The simplest approach is to add a small bit of JavaScript / jQuery to your site that adds a class to the page when you scroll past a certain point and removes it when you scroll up.
Your image is then styled relative to this class.
Your jQuery might look something like this
<script>
$(function() {
  var menuOffset = $('.sticky').offset().top;
  
  $(window).on('scroll', function(e) {
    if ($(window).scrollTop() >= menuOffset) {
      $('body').addClass('goSticky');
    } else {
      $('body').removeClass('goSticky');
    }
  });
});
</script>

Open in new window

In this code we get the offset.top of the menu so we can figure out when we scroll to it.
We then setup an event handler on the scroll event. We fetch the scrollTop offset of the window and compare it to where our menu is on the page. If we have scrolled up to or past the menu we add a class to the <body> of the document otherwise we remove.
We can then style the image based on the class.
Here is my HTML
  <div class="sticky">
    <img src="images/plus.png" class="sticky-logo"> My sticky menu
  </div>
  <p> ... </p>

Open in new window

CSS
.sticky img {
  opacity: 0;
}
.goSticky .sticky img {
  opacity: 1;
  max-height: 50px;
  transition: all 2s;
  margin-left: 15px
}
.sticky {
  width: 1140px;
  height: 50px;
  line-height: 50px;
  background: blue;
  color: white;
}
.goSticky .sticky {
  position: fixed;
  top: 0;
}

Open in new window

You can see it working here

Author

Commented:
Hmm .. this seems like this very well might do the trick, .. thanks Julian!  

The only thing is ...  I was hoping to wrap a link around the logo, and I'm concerned that merely toggling the opacity might result in people sometimes accidentally clicking or tapping on the invisible element when they don't mean to.  Is there any way that I could get around that -- without having to sacrifice the CSS animation?

Also .. should I display the logo using a different z-index .. so that it overlays my sticky menu instead of appending to it?  I ask because I'm concerned that adding the logo to the same z-index layer might force my navigation menu to wrap to a 2nd line, which is a problem I've been running in to as I've been experimenting with different approaches.  Any thoughts?

One other possible issue with this is that my navigation menu is being dynamically generated using this PHP code snippet .. which I think might complicate things:

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>">
<span class="navbar-toggler-icon"></span>
</button>		

<?php wp_nav_menu(
array(
	'theme_location'  => 'primary',
	'container_class' => 'collapse navbar-collapse',
	'container_id'    => 'navbarNavDropdown',
	'menu_class'      => 'navbar-nav ml-auto',
	'fallback_cb'     => '',
	'menu_id'         => 'main-menu',
	'depth'           => 2,
	'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
)
); ?>

Open in new window



Thanks again,
- Yvan
ZeropointNRGHedge Fund Manager

Commented:
It seems your sticky nav script is giving this problems when I try it. I've seen other problems like this too regarding sticking your nav bar. Doesn't matter what z-index I give it.
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

ZeropointNRGHedge Fund Manager
Commented:
No wonder, your z-index is 99998 lol xD

Test it out.

Put this into a file called "fadelogo.js" and place it in your root.
    $(document).scroll(function () {
    //Show logo after user scrolls 180px
    var y = $(this).scrollTop();
    if (y > 180) {
        $('.fadeLogo').fadeIn();
    } else {
        $('.fadeLogo').fadeOut();
    }
});

Open in new window

Add this under your title tag
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

Open in new window

Add this to a sheet and link to it or add it to your other styles.
<style>
.fadeLogo {
    display: none;
    position: fixed;
    left: 50px;
    top: 25px;
    bottom: 0;
    width: 9%;
    height: 50px;
    background-image: url("https://www.experts-exchange.com/images/experts-exchange/header2017Q4/expertsExchangeLogo.svg");
    background-color: #000000;
    z-index: 99999;
}
</style>

Open in new window

Add this under your body.
<script src="fadelogo.js" type="text/javascript"></script>
<div class="fadeLogo"></div>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
I was hoping to wrap a link around the logo, and I'm concerned that merely toggling the opacity might result in people sometimes accidentally clicking or tapping on the invisible element
Just make your image width 0 when not shown.
Updated CSS
<style>
.sticky img {
  opacity: 0;
  width: 0; /* <==== ADD THIS */
}
.goSticky .sticky img {
  opacity: 1;
  max-height: 50px;
  margin-left: 15px;
  transition: all 2s;
  width: auto;
  display: block;
  padding: 2px;
}
.sticky {
  width: 1140px;
  height: 50px;
  line-height: 50px;
  background: blue;
  color: white;
}
.goSticky .sticky {
  position: fixed;
  top: 0;
}
</style>

Open in new window

I have updated the sample with the above (http://www.marcorpsa.com/ee/t3738a.html)

With respect to the PHP generation - why would that complicate things? All you need to do is add your <a><img></a> code to the script at the appropriate place and do the rest with CSS.

Author

Commented:
I ended up figuring out how to get the z-index thing working on my own (works pretty well on desktop, anyways).

http://dev.movingpicture.com/

Both of you have been very helpful, and I'd like to somehow split up the points between the both of you.  It appears that I am no longer able to do that, though.  Any idea as to how I might do that?

- Yvan
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You should be able to select the answers that you want as the solutions - you can select more than one. You should then be able to specify points per.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial