Sticky element in a PAGE

var sticky = $('.fixed_element');

so i guess the $sticky is wrong in the rest of the function – or you setup
var $sticky = $('.fixed_element');

my recommendation: use for that very demanding point of a fixed positioning in floating systems a given script.
From my recherche point – there is no good plugin for it – but a few good jQuery scripts to solve the problematic.
The scroll event is something you have to be carefull with – not to overload site performance.
You have to think about – if you have long fixed column too ( longer than screen height ! how to view this content under the screen bottom of the fixed column!

have a look to this site: https://webers-testseite.de/sticky-column/
if you scroll to bottom – the fixed positioning is gone to get the content in the left column too !

you find the script on : https://github.com/EnzoMartin/Sticky-Element#readme

if you like this solution – i will show you how to load only for the given pages the sources. And to implement it in enfold.

well the scripts you can download from the github link above – take the minimized one: Link

create a child-theme and in the child theme folder an js folder
upload that minimized script to this js folder.

on your functions.php of your child theme insert:

function include_sticky_js_file() {
if( is_page(30238) ) {
wp_enqueue_script( 'stickyelement', get_stylesheet_directory_uri().'/js/jquery.stickyelement.min.js', array('jquery', 'avia-default'), 2, true );
}
}
add_action( 'wp_enqueue_scripts', 'include_sticky_js_file', 100 );

you see that i only embed the code where i need it. The other pages stay untouched because of performance reasons.
Allthough that little script only has 4kb

Now you need the script for the implementation on the specific page:
the script has two (take some classes – this is easy to set on enfold) containers to observe
the container which is sticky – and the parent element. So i gave to the color-section (or whatever it is a class that i can select it easier and the same with the container which should remain sticky.

See code for my test installation:

add_action( 'wp_footer', 'custom_sticky_script' );
function custom_sticky_script() {
if( is_page(30238) ) {
  ?>
  <script type="text/javascript">
            jQuery(document).ready(function(){     
                // With options
                jQuery('.sticky_element').sticky('#av_section_1 .entry-content-wrapper', {
                    useTransition: false,
                    animate: false,
		    offset: 110
                });
                jQuery('.sticky_element2').sticky('#av_section_3 .entry-content-wrapper', {
                    useTransition: false,
                    animate: false,
		    offset: 0
                });
            });
  </script>
  <?php
}
}

you see on my testpage two containers which stay fixed so two codes for it

jQuery('.sticky_element').sticky('sticky_parent_container', { …

so on my testpage the column gets the class sticky_element (and sticky_element2)
and the direct parent container is adressed by me via #av_section_1 .entry-content-wrapper

thats all – you have to play with the offset value

if you are working on functions.php of your child-theme it is a good advice to have a working copy of it on your desktop.
if you make some mistakes on changing the code ( maybe a semikolon is missing or quotationmarks aren’t the right one etc. you will see a white screen and can not interact with your site.) you could alway playback the working copy via ftp to your site.

___________

so now – as i said is if you have all done for implementation of the script.
That little script is written to have an element fixed within his surrounding container !
So you have to adress (select) two containers – the one which is fixed and the parent container of this element.

this part of the script should be adjusted to your givings:

jQuery('.sticky_element').sticky('sticky_parent_container', { …

1) The parent container can be a class or an id etc. on Enfold it could be the id of the section: #av_section_1 2, 3, 4 etc.

2) the sticky_element should be a unique class ( on my test page above i used on the bottom that class vor the 2nd and 3rd Column – that is possible.
– so go and give a custom class to the column you like to have the fixed position. (f.e.: sticky_element1, sticky_element2 etc)

the second code ( the first was the implementation of the script itself) for functions.php of your child-theme is than:
and this (second one) is that the script nows what to handle and how:

add_action( 'wp_footer', 'custom_sticky_script' );
function custom_sticky_script() {
  ?>
  <script type="text/javascript">
            jQuery(document).ready(function(){     
                jQuery('.sticky_element1').sticky('#av_section_1', {
                useTransition: false,
                animate: false,
		offset: 85
                });
            });
  </script>
  <?php
}

by the way: this js works with positioning relative and calculates the top position- so it might work on ipad, iphone too – but with jerk i suppose
in the meanwhile i rearanged it a bit : and inserted a width for that. But i dont know why the resize event does not work immediately.
$(window).on('load resize', function(){
On reloading the page it works – maybe a mod could help here
this is now for all pages – i do the rest if needed.

add_action('wp_footer', 'include_sticky_values');
function include_sticky_values(){
?>
<script type="text/javascript">
(function($) {
        $(window).on('load resize', function(){
          if ($(window).width() > 768) {
            /***  here comes the code to sticky element***/
                $('.sticky_element').sticky('#av_section_1', {
                    useTransition: false,
                    animate: false,
                    offset: 85
                });
                $('.sticky_element2').sticky('#av_section_3', {
                    useTransition: false,
                    animate: false,
                    offset: 50
                });
            /***  here ended the code to sticky element***/
           }
        });
})(jQuery);
</script>
<?php
}

it would be better if you get help from a mod here – give them an admin account.
Because you have first the trouble with parent name and child mismatch.
This was the first thing to do – because all other work will ground on a working child-theme.
Doing code to parent functions.php is to risky – and you will loose the things on next update.

If this is done – i will help you furthermore. Because you have done allready alot of work on your theme it is best to have a backup of it.

___________

On your page ( by the way it is page-id-4652 )
you have those sticky column in : (#after_section_1)
You gave to the 1/3 column the custom class: fixed_element (on code it will be .fixed_element )
by the way you have to get rid of other solutions on that – the other codes will be causing problems on that)

so the code will be :

add_action('wp_footer', 'include_sticky_values');
function include_sticky_values(){
?>
<script type="text/javascript">
(function($) {
        $(window).on('load resize', function(){
          if ($(window).width() > 768) {
            /***  here comes the code to sticky element***/
                $('.fixed_element').sticky('#after_section_1', {
                    useTransition: false,
                    animate: false,
                    offset: 85
                });
            /***  here ended the code to sticky element***/
           }
        });
})(jQuery);
</script>
<?php
}

we have to play later with the offset value if it will be ok for your site

A little info about sticky : there is a discussion on css3 experimental position:sticky (-webkit-sticky) and it seems that this will be included in the future browsers. ( it is something in between fixed and relative positioning – as in my solution above) and it should only be necessary to set this css rule and the top bzw bottom value )
see here : https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

Actually everything is already said !

A) erase the codes and custom-classes set by the other method

1) download the script from here: Download
2) Upload that script to your child-theme / js – Folder
3) Embed that javascript file to enfold – put in functions.php of your Child-Theme:

function include_sticky_js_file() {
wp_enqueue_script( 'stickyelement', get_stylesheet_directory_uri().'/js/jquery.stickyelement.min.js', array('jquery', 'avia-default'), 2, true );
}
add_action( 'wp_enqueue_scripts', 'include_sticky_js_file', 100 );

4) Give the custom-Class to your element you want to fix : sticky_element
5). This comes to your functions.php of your Child-Theme:

add_action('wp_footer', 'include_sticky_values');
function include_sticky_values(){
?>
<script type="text/javascript">
(function($) {
	$(window).on('load resize', function () {
          if ($(window).width() > 768) {
            /***  here comes the code to sticky element***/
                $('.sticky_element').sticky('.entry-content-wrapper', {
                    useTransition: false,
                    animate: false,
                    offset: 85
                });
            /***  here ends the code to sticky element***/
           }
        }).trigger('resize');
})(jQuery);
</script>
<?php
}

( in nearly all cases the direct parent element will be : entry-content-wrapper )

6) if you have to adjust the offset because on different pages it might be other settings this part you can add inbetween the commented lines with other custom class of sticky element ( perhaps : sticky_element2, etc.)

                $('.sticky_element2').sticky('.entry-content-wrapper', {
                    useTransition: false,
                    animate: false,
                    offset: 50
                });

7) add this to your quick css to have not the calculated top distance on responsive case
you might adjust this – depending on your settings:
( sticky-scroll is the class added by that script to your sticky elements)

@media only screen and (max-width: 767px){
.sticky-scroll {top: 0!important}
}

8) Think of – that there is no other element in the same color-section under the sticky element – you have to open a new color-section if there are other content under it !

yes – nice !
if you can use this class for the not scrolling element ( sticky_element ) now again and again till you have to correct the offset because of different header size. As a class you can use it even on the same page multiple times.

On this page with “Assistanat – Communication …” you don’t have to put in the contact form in the same 2/3 row. You can do it as before – but you have to do it in another color-section im you want it in a 1/1 Container.

one thing – your timeline is a bit shifted from the position – don’t know if you have done it by changing icon width
if you like to have it again on the middle of the icons:

.avia-icon-list .iconlist-timeline {
    left: 19px;
}

By – and
De rien

• This reply was modified 7 years, 1 month ago by Guenni007.