Sticky or fixed element - Support | Kriesi.at

Tagged: Element, fixed, sticky

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
June 22, 2018 at 9:34 am #976167

Monique
Participant

Hi there,

See link development site’s page below.

My client wants to have her photo in the right column to be sticky on top when scrolling down the content of the column on the left. I looked in the support forum and found two ways to create a sticky element:
1) https://kriesi.at/support/topic/sticky-element-in-a-page/#post-871884 bij @Guenni007
2) https://kriesi.at/support/topic/sticky-element-in-a-page/#post-868505 by @Ismael (yes, I also changed “var sticky = $(‘.fixed_element’);” to “var $sticky = $(‘.fixed_element’);”

Unfortunately both didn’t work.

Can you please help me to make this work?

Thanks & best regards,
Monique

June 22, 2018 at 12:52 pm #976301
Mike
Moderator
Hey Monique,
*Edit* I have tested your page and found that this script works after adding the correct class for your image, please try adding this code to the end of your functions.php file in Appearance > Editor:
```
function add_sticky_script(){
?>
<script type="text/javascript">
(function($){
  function a() {
      $(window).scroll(function(e){
        var $sticky = $('.sticky_element');
        var position = ($sticky.css('position') == 'fixed');
        if ($(this).scrollTop() > 350 && !position){
          $sticky.css({'position': 'fixed', 'top': '50px', 'width' : $sticky.innerWidth() });
          $sticky.next().css('float', 'right');
          $sticky.addClass('fixed_element_style');
        }
        if ($(this).scrollTop() < 350 && position)
        {
          $sticky.css({'position': 'static', 'top': '0px', 'width' : '' });
          $sticky.next().css('float', 'left');
          $sticky.removeClass('fixed_element_style');
        }
      });
  }

  a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_sticky_script');
```
Another option: you could try the plugin Sticky Menu (or Anything!) on Scroll
I tested this and it seems to work good with a easy to use options panel.

Best regards,
Mike
June 22, 2018 at 1:53 pm #976335
Monique
Participant
Hi Mike,

Thanks for your quick reply!

I tried your code and ‘something’ is working now. However:
1) Because of the sticky header, the top part of the image is ‘cut off’ or lies behind the header if you wish. This might be a styling thing? I think the 350 is the timing? So I mean the 50px to anything like 80px or so?
2) I put the .sticky_element in the custom CSS field of the column and not to the image only. However it looks as if only the image is sticky, not the whole column as I intended.

Update because of advancing insight… The image was sticky and not the column because I put the code in custom css for the image. Once I put it inside the column it wasn’t working at all anymore.

Tested the plugin you mentioned but it shows exactly the same behavior.

Please advise.

Regards,
Monique

PS: I always try to use as few plugins as possible, so if we can make this work without a new plugin I would prefere that :-)
- This reply was modified 6 years, 5 months ago by Monique.
June 23, 2018 at 12:05 am #976514

Mike
Moderator

Hi,
Thanks for the image, but can you please include a admin login in the private content area so we can take a closer look.

Best regards,
Mike

July 3, 2018 at 12:23 pm #980521

Monique
Participant

Hi Mike,

Please find below.

Looking forward to your reply!

Regards,
Monique

July 3, 2018 at 1:44 pm #980558
Mike
Moderator
Hi,
Thanks for the login, I found that when adding the custom class to the column you included the dot, I removed the dot and it now works.
I also adjusted the sticky height of the column and the start position, here is the new code for your review:
```
// sticky element
function add_sticky_script(){
?>
<script type="text/javascript">
(function($){
  function a() {
      $(window).scroll(function(e){
        var $sticky = $('.sticky_element');
        var position = ($sticky.css('position') == 'fixed');
        if ($(this).scrollTop() > 170 && !position){
          $sticky.css({'position': 'fixed', 'top': '170px', 'right': '8%','width' : $sticky.innerWidth() });
          $sticky.next().css('float', 'right');
          $sticky.addClass('fixed_element_style');
        }
        if ($(this).scrollTop() < 170 && position)
        {
          $sticky.css({'position': 'static', 'top': '0px', 'width' : '' });
          $sticky.next().css('float', 'left');
          $sticky.removeClass('fixed_element_style');
        }
      });
  }

  a();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_sticky_script');
```
Please clear your browser cache and check.

Best regards,
Mike
July 3, 2018 at 2:59 pm #980598
Monique
Participant
Hi Mike,

Thanks for your help.

Right now when you scroll down the page a few things happen:
- the image suddenly drops down a few pixels > is it possible to make it more smooth?
- depending on the width of the screen, the images moves to the left (smaller screen) or to the right (bigger screen) > can it stick to the same location looking at the width of the screen?
- When the column is ‘finished’ the image still sticks and moves under the large button and the footer of the site > can it stop to be sticky when the column is ‘finished’, so that from there it moves up with the column again?
See example of what it should look like by Guenni007 @ https://webers-testseite.de/sticky-column/.

Please advise.

Regards,
Monique
- This reply was modified 6 years, 4 months ago by Monique. Reason: not working
July 4, 2018 at 3:25 am #980876

Mike
Moderator

Hi,
I believe Guenni007 used a different script, here he explains the steps

Best regards,
Mike

July 4, 2018 at 8:23 am #980985

Monique
Participant

Hi Mike,

Yes, I tried that one before as well, but it didn’t work (see my first post in this topic). Let me try again and I’ll come back to you.

Regards,
Monique

July 4, 2018 at 11:40 am #981100

Monique
Participant

Hi Mike,

Done => Guenni007’s script successfully applied :-)

The only thing I’ve changed was the code
if ($(window).width() > 768) {
to
if ($(window).width() > 767) {
since I wanted to load this script as from 768px upwards.

Thanks for your help!

Can you flag this topic as closed please?

Have a nice day,
Monique

July 4, 2018 at 1:22 pm #981164

Rikard
Keymaster

Hi Monique,

Great, glad you got it working and thanks for the feedback. I’ll close the thread for you, please open a new thread if you should have any further questions or problems.

Best regards,
Rikard
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Sticky or fixed element’ is closed to new replies.