Tagged: , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #976167

    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

    #976301

    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

    #976335

    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 1 year, 7 months ago by  Monique.
    #976514

    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

    #980521

    Hi Mike,

    Please find below.

    Looking forward to your reply!

    Regards,
    Monique

    #980558

    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

    #980598

    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 1 year, 6 months ago by  Monique. Reason: not working
    #980876

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

    Best regards,
    Mike

    #980985

    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

    #981100

    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

    #981164

    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

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

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