Only display element during specific article

I am creating a single page scrolling site that has a few articles with fixed backgrounds and fixed items to be displayed only during that article. I am currently the fixed element based on pixels scrolled (as below)

$(document).scroll(function() {
$('#portslider').toggle($(this).scrollTop() < 4295);
});

I thought that this solved my problem of only wanting to show the fixed elements only each in their own article. However once I started working on making the site responsive I realized this is was not going to work. A few of the other articles need to change length based on screen width, which changes the pixel length where all of the items would need to hide.

So the site looks great at screen size over 2300px and then as you shrink down and the articles change size the fixed elements (weddings, life, adventure, etc...) are no longer hiding at the right scroll length.

A few ideas that I thought of but have not been able to figure out how to proceed with:

  1. Can I with Jquery have the item display only within a certain article using the id instead of pixels scrolled?

  2. Or can is there a way to use media queries on the above code to change the pixel length at different screen sizes?

You can view the site here: http://s416809079.onlinehome.us/ (still under construction and there is a lot not completed yet, best view in firefox so far)

Thanks!

Solutions

Assuming you have a DOM like:

<body>
     <article id="article1">[article in here]</article>
     <article id="article2">[article in here]</article>
</body>

(these could be <div> tags as well...), you can do something like this to set the toggle at the correct height no matter what. (You might have to tweak the pixels based on box model, padding, margins, etc):

 $(document).scroll(function(){
     $('#portslider').toggle($(this).scrollTop() < $('#article2').css('top'));
 });

This way, no matter what the pixel position of the "top" of the article is, #portslider will appear correctly. (You might need to listen to window.resize events too...)

Tags: Javascript / Jquery / Html

Similar questions

a element inside of article tag gets duplicated 10 times all of them getting the same classes, ids etc
tl;dr; Some javascript that runs in wordpress duplicates my top element all over the html. See image. Hi I am really surprised at this bug in wordpress, and its actually pretty easy to replicate. I wanted a to wrap all of my article content so that it would look like this code: I am using the Nisarg theme, but if i went inside of twentysixteen them...
How to make visited <article> element 0.5 opaque?
I am trying to make a visited "article" element on my site 0.5 opaque, so users know which ones they have clicked on in past sessions. I have tried this CSS: but it doesn't seem to have an effect. Here is a link to a JSFiddle mockup I created https://jsfiddle.net/v00cgvc8/ Screenshot of my site's code
Hide css :before element during woocommerce loading class
On my woocommerce add to cart button, i have hidden the text and changed it into an icon using the following css content: "\e8e7"; } when clicking the add to cart button, its given a class by woocommerce of loading, which shows an animated cog and dims the button. However my original icon stays there and is still visible, and looks weird ...
Getting a specific "element" from within an "element" when parsing JSON
I am working on parsing posts that my app is receiving from Wordpress. I am getting the data. And i am putting it in a dictionary. The only problem is that I am receiving 7 posts currently. Below is what I am getting from the server. My problem is that "id,slug,etc" is all in the value of post. I have no clue how to extract individual data as well ...
Wordpress article with >200 comments shows display error only in Firefox
This article on a customer's website has over 200 comments and somehow several comments at the very bottom of this article are merged - but only in Firefox. Chrome and IE look OK. This appears to be the only article with this issue and I assume it is due to the number of comments. Source code looks ok to me... Website is running WordPress 3.0.4. (n...
Run a code only on theme activation only during first activation
And the code I am trying to execute is this: That means when the first time the theme is installed it should clear away all the default widget set by WordPress. Where am I going wrong because the desired result is not achieved? Please suggest me the fix or direct me in the direction so that I can troubleshoot.

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.