Need a header placed below the fold to stick to the page top when scrolled past

This thread is resolved. Here is a description of the problem and solution.

Problem: I'm using a sticky header plugin to help "stick" the title of a post at the top of the screen once I scroll past it, but I can't get the plugin to work with Toolset.

Solution: In the Toolset environment, jQuery is represented by the variable 'jQuery' instead of '$', so you must replace any instance of the '$' variable with 'jQuery' in your initialization code. Then you must calculate the correct initialization height based on the placement of the title and the menu height. See the attached screenshot below.

jQuery(document).ready(function() {
  jQuery(window).bind('scroll', function() {
    // your code here using jQuery instead of $
    // ...
  });
});

This support ticket is created 7 years, 2 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Front-end display, Layouts plugin

This topic contains 4 replies, has 2 voices.

Last updated by jonB-5 7 years, 2 months ago.

Assisted by: Christian Cox.

Author

Posts

September 10, 2017 at 1:52 pm #568437

jonB-5

I have been trying to achieve the effect at this link (hidden link) but on a div containing the post title as opposed to a menu. I have copied example code such as that at (hidden link) into my content template but I simply cannot get it to work.

Is this a limitation of Toolset or is there a specific way I need to implement this?

Any advise is most appreciated and a working example would be great as I haven't really used scripts before.

September 10, 2017 at 3:05 pm #568463

Christian Cox

Hi, when working the Toolset environment, the jQuery object is represented by jQuery instead of $. For example, instead of this:

$(document).ready

You should use this:

jQuery(document).ready

Replace every "$" symbol in your script code with "jQuery", then place that code in the JS panel of your Content Template, and try again. If you're running into problems after that, open up the browser console and see if any JavaScript errors are thrown. Let me know what you find out.

September 10, 2017 at 4:06 pm #568478

jonB-5

Ok, I see this has allowed the function to work, though I now wonder if the function is the wrong one. I had though the number set in the function defined how many pixels were scrolled before the function was activated, but it doesn't appear to be doing that. If you go to hidden link you will see the example I am testing on using the code below.

What I need is for the header to freeze before it passes under the menu rather than re-appearing afterward. Can you advise?

HTML...

<div class="row">
  <div class="col-sm-4">
    <header>
      [types field='page-intro'][/types]
    </header>
  </div>
  <div class="col-sm-6">
	<!--<h1>[wpv-post-title]</h1>-->
	<p>[wpv-post-body view_template="None"]</p>
    [gallery columns="5" size="large" link="file" ids="[types field='gallery-1-images-x5'][/types]"]
  </div>
</div>

CSS...

.fixed {
	position: fixed; 
	top: 100px; 
	z-index: 1;
}

Script...

   jQuery(document).ready(function(){
	   jQuery(window).bind('scroll', function() {
	   var navHeight = jQuery( window ).height() - 100;
			 if (jQuery(window).scrollTop() > navHeight) {
				 jQuery('header').addClass('fixed');
			 }
			 else {
				 jQuery('header').removeClass('fixed');
			 }
		});
	});

September 10, 2017 at 4:24 pm #568484

Christian Cox

Screen Shot 2017-09-10 at 6.19.16 PM.png

My guess is that this line isn't accurate:

var navHeight = jQuery( window ).height() - 100;

This navHeight variable is used to determine when the "fixed" class is applied to the header text. If it's applied too late, this would cause the text to scroll underneath the menu before snapping into place. That would seem to indicate that the variable is defined incorrectly. You need to calculate the height from the top of the menu to the top of the text. See the attached screenshot.

September 10, 2017 at 5:11 pm #568497

jonB-5

That's solved it - I guess I hadn't been adjusting the figure enough, thanks!