Text Element Sticky: stick to top on scroll

---

Hi!

Is it possible to assign a sticky function to a text element?

On scroll, the text element should stick to the top when it hits the top.

Cheers!

taemin

Hi Taemin,

this is possible but not a default function from Laytheme.

You need to do that with a little jQuery.

http://bfy.tw/5nDR

:-)

Are you familiar with simple Javascript?

Many wishes!

Marius

Ok, I am not that mean:

jQuery(document).ready(function($) {

    function sticky()
    {
        var window_top=$(window).scrollTop();
        var top_position=$('body').offset().top;
        var element_to_stick=$('#header');
        
        if (window_top > top_position) {
            element_to_stick.addClass('sticky');
        } else {
            element_to_stick.removeClass('sticky');
        }
    }
    $(window).scroll(sticky);
    sticky();
    
});

#header.sticky
{
    position: fixed;
}

Have also a look here:
http://laytheme.com/documentation.html#custom-javascript

Many wishes!

Marius

Hi!

I have tried this but not succeeded:

http://andrei-lascu.com/info

I would like to have the Contact text block and the image stick to their original position and have only the middle grid scroll up.

I have also tried with a simple position:fixed, and did not work.

Can you please help me out?

Thanks!
Carlota

Dear @ccastells
you can add a CUSTOM CLASS to the element and give it a position: fixed.

All the best!

Marius

@mariusjopen said in Text Element Sticky: stick to top on scroll:

position: fixed

Hi Marius,

unfortunately with the position:fixed it also does not work.
https://andrei-lascu.com/info-2

Any idea on how can I fix this?

Thanks,
Carlota

Dear @ccastells
if I look at your page I do not completely understand which part should move and which part should stay fixed on the page.

Best!

Marius

@mariusjopen

Hi Marius,

I would like the column in the middle to scroll, and have the left and right fixed.
https://andrei-lascu.com/info/

I tried the position:fixed in this other link to show that this does not work either:
https://andrei-lascu.com/info-2

Thanks,
Carlota

Dear @ccastells

here a very rough sketch. Hope it brings you in the right direction :-)

.no-parallax.no-offset.col.push-0.span-2.align-top {
    position: fixed;
}

.no-parallax.has-offset.col.push-0.span-2.align-top {
    position: fixed;
    right: 20px;
}

.has-parallax.no-offset.col.push-0.span-3.align-bottom {
    padding-left: 30%;
}

Best!

Marius