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 !

do you have a live link to it – and or a screenshot how it should look like

something like this ? https://webers-testseite.de/elegant/

you could have it vice-versa

• This reply was modified 7 years ago by Guenni007.

schöne Grüße nach Berlin !

wenn du das hier setzt dann geht beim Verkleinern des Screens das Logo mit in der Breite:
dadurch floatet das letzte Element nicht mehr um – kurz vorm umschalten des responsive designs auf hamburger menu

#header_main_alternate .main_menu ul:first-child {
    display: inline-flex !important;
}

ok – i see you got it:

if you like to increase header-height now:

#header_main_alternate, #avia-menu  {
    height: 80px !important;
}

#avia-menu li a {
    line-height: 80px !important;
}

i do not know what id your new menu-item will get.
So these ZZZ are placeholders.

click to enlarge

by the way – you have to be a bit earlier to mobile menu – your last menu point flows to next line on some screen width

where to get it: i got mine from envato

duplicate this menu point and place it on top of your menu.
now you have two images in the menu:
set the main_menu logo to display none. ( ZZZ will be the list-item id. – do it and than i will help you to determine)
and on burger menu the same with the logo in the middle position

is it a WPML translation ?

If so – this is not a bug – it is a feature of WPML
This gives you the oportunity to set up a totaly different layout if you wanted.

the point is that even the enfold options page on admin has a german and an english settings page.

the way to synchronise it : The wanted page layout – choose (on your site it seems to be the english one.
Go to Enfold – Import/Export. (on top you see there is an english flag ). – Export Theme-Settings File

Change now to german ( you see even on Enfold Admin above a german flag)
Same thing but import now the “english” Theme Settings file.
Don’t know if the quick css is imported too – but i think – yes.

________________________

Edit: . ah i see it is a sitepress plugin. But. it might be similar to the description above.

• This reply was modified 7 years ago by Guenni007.

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

i suppose that there are too many dependencies to other js files needed jquery. So every one of these has to be under the jquery loading.

This is normal registering of wordpress and not specific to enfold.
I don’t know how WP-Rocket tries to do so.
if i would like to do so i will first deregister it and than register it back again f.e.

i have sometimes this on my functions.php –
that loads the jquery via cdn from google servers – if it exists (or a internet connection is present)
if not it will load the normal jquery from folder – but i do not have success on loading it in the footer.

if( !is_admin()){ 
    $url = 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'; 
    $test_url = @fopen($url,'r'); 
    if($test_url !== false) { 
        function load_external_jQuery() {
            wp_deregister_script('jquery'); 
            wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'); 
            wp_enqueue_script('jquery'); 
        }
        add_action('wp_enqueue_scripts', 'load_external_jQuery'); 
    } else {
        function load_local_jQuery() {
            wp_deregister_script('jquery'); 
            wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', __FILE__, false, '1.12.4', true); 
            wp_enqueue_script('jquery'); 
        }
    add_action('wp_enqueue_scripts', 'load_local_jQuery'); 
    }
}

i tested it with google loading – and it is no performance profit on it.

but on enfold the avia-compat.js is loaded in the header – maybe this is the reason for inconsitencies if jquery is in the footer (after avia-compat.js)

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

to that script : it works with sticky element and surrounding parent. The fixed positioning is gone when sticky element reaches the bottom of the parent container. !
So you must do following containeres in a different f.e. color-section !!!
see now the test page i inserted in the same container a 1/1 under it – and this leads to something you don’t want to have.

some words on sticky element – :

go and have a look to different devices if the effect works on all – espacially mobile browsers. Very often the page is than unusable.
For our script above we had to find a way to have normal behavior for responsive case ! This is possible – but performance will go down
Another intime process must prove if window width is less than f.e 768px
i think this should only be a gimmick to use on one page – the risk of losing users because of a low performance of the site is too high.

Testing page is my page where i tested it for you if it will work: https://webers-testseite.de/sticky-column/

nearly every modern browser got his own “developer tools”.
on a lot of browsers hold the mouse over the element you want to inspect and press context menu button of your mouse (left button) on my magic mouse it is the left part of the active sensor field.
on that context menu there is something like inspect the element or only inspect.
on first use a window opens with the source code and some extra infos about css etc. – you can have that part of the window as an extra window separated from your frontend window. Now have a look what happens when you go with your mouse over the elements.

https://streamable.com/s/5lhs9/xykcyp&iframe=true

there you can get what you want – all the classes and ids.
The html source code is on the left and well formated with cascaded styling – parents are allways more left – and on click to the little arrow the container opens and shows you the inner content.

The realy clou on that is that you can edit on the right side the css virtually. Nearly allmost Changings are shown on your front end immediately.
click on image to enlarge – you will see that i virtually changed the color of that inputfield i’m writing on now:

On Enfold the color-sections got ids with the pre-name av_section_ and a count (starting at 1)

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