Sticky elemets on scroll

Design help General
1

Hi Guys, I’m trying to create an element sticks on scroll (see here for an example / the script I’ve tried to implement).

The following code snippet needs to be placed in the head tag:

 <script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

It looks like the header code calls the script. I’ve tried placing it in the body section and calling it (adding classes) to the element where I want to apply it to (a sidebar div) and haven’t had any luck.

Is this something pretty straight forward that I’m missing?

2

Hi there, without seeing the rest of project, I can only comment, but a couple of things:

a) You have this jquery.js code script being called. You can get rid of that, because webflow loads jquery for you.

b). You should put this remaining code in the Before Body tag section of the custom code tab in site settings, instead of in the head, you will have less issues doing that.

c) The container that you want to be made sticky, should have an ID of “sticker” according to your code fragment, so check that you are setting the ID of the element to “sticker” and not a class name of sticker, as this code above you pasted is identifying the element by ID, and not class. Elements that are referenced by css class name start with a period like “.sticker” not “#sticker”.

Try that and then see if it works.

Cheerios

3

Just signed up this week and I’m wondering about this same thing. Is it possible to do this with the new Interactions, or is this example still the way to go?

Thanks!

4

Hi, well that is up to you, if you do this yourself in Webflow or something similar, you will have to in any case, set it up, and plan how you want it to work, setup the container at the top of the page with initial display set to none, and then fade in on scroll with fixed positioning of sticky content div to top of page (or where ever you want to pin the sticky container).

Sticky.js is just another third party solution, but you can do this with interactions and maybe a little jquery could be needed, depending on the customisation… You can use both methods though…

5

Thanks Dave. So I guess this is where I admit that Webflow is perfect for me because I have absolutely no clue how to deal with code at all. I poked around so that I didn’t have to look like an idiot, but I couldn’t find the answer. If I were to use sticky.js, where do I put that code? I understand that I have to use the code up in grandtheftpixel’s post in the Before Body tag section, but where do I put the actual jquery.sticky.js code and what do I do with the package.json file?

I realize I’m asking stupidly basic stuff here, so if there’s a resource somewhere else you’d like to point me to instead of having to answer these questions, I’m completely open to that.

Thanks so much for the help.

6

Hi there, well if you want to use some custom js files like the sticky.js and the json file, then you need some kind of storage place for you to put those files, like for example you can use Amazon S3 or Rackspace to put files that can be publicly accessed via CDN.

So you would upload your js files to the CDN, then get a url pointing to those files, and link your scripts up (like the jquery.sticky.js file) using the script link:

<script src="http://path/to/jquery.sticky.js"></script>

You would place this script link in the Before BODY section of your site. If there are other files needed, like css files or something, you would link the CSS files in the HEAD section of your site.

7

nice one here! I do get a problem which causes my sticky menu to become smaller a padding to the left.
Any ide?

Daniel

8

Hello @Daniel_Remes, I’m not sure if I completely understand what the issue is that you are reporting, are you having an issue with this third-party plug-in? Are you having a padding issue with the sticky menu? What is the class name for the element that is using this sticky.js? Cheers

9

Ysr it’s the sticky.js. It’s working well and I have applied it in my tab menu (new widget) id: sticky and class "tab menu"but when I scroll and reach the top it makes the tab menu smaller and push it to the left.

Any idea?

Cheers,

10

hi, which page is this id sticky on?

11

Thanks so much for walking me through this @cyberdave! It’s working like a charm!

Unfortunately, my sticky element takes up a ginormous amount of space on a phone’s screen. Any idea how I’d go about disabling the sticky-ness on a phone? It’s tolerable on a tablet, phone? Notsomuch.

Thanks again for all of your help!

12

I had the same issue when trying to do this with Bootstrap’s affix.js as well. Not sure what the problem could be.

1 Like
13

I just went in and set my .sticky element to 100% width and it fixed that issue.

2 Likes
14

Hi there!

I got the sticky to work as it should. I have applied on a tab menu that sticks to the top when scrolled.
One problem occur tough thats a bit hard to figure out.

When using tabs and you are on the first tab and scrolling down to see the content and want to go to next tab, the content is scrolled down to the same level from the previous tab. Is there any way to fix this?

I hope you understand what I trying to say :smiley:

Cheers,

15

Hey guys,

Hopefully this will be quick…

After following above, I am having trouble. Below is the code and links from GitHub I have placed in my body section.

887×394 40.1 KB

As a test, I have created a section with an ID of “sticker” and placed a coloured container inside… In preview mode this has no effect. my site is currently not published (unsure if this matters?) but if someone can look at this using the public link below, I would be very grateful:

I am testing this on my page “+Project Page”

Public Link: https://webflow.com/design/riaz-london?preview=2bb6319db3afe792618c47599e5911d0

16

Hi @Mark, you are correct, custom code will not work, until your site is published. You might try that, and then check it again. At that point, you can right click in chrome and choose inspect element, then go to your console tab, and check if there are any scripting errors.

Cheers, Dave

17

Okay, thank you Dave. I appreciate the quick response. Will do as instructed.

18

Hi, I have published the site and I am still having trouble. Seems as if there are no errors either…?
Published Link: http://riaz-london.webflow.com/project-page

I used the raw code links for jquery.sticky.js and bower.json from GitHub

https://raw.githubusercontent.com/garand/sticky/master/bower.json
https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js

Are these the script files I need to referance, and is it okay that I used the raw links?

Many Thanks

19

Hi @Mark, I see lots of errors :frowning: So you might check that, see my screenshot… My advice is to solve each error in turn, and then when there are no more errors, it should run ok hopefully :smile:

1285×214 75.5 KB

Cheers, Dave

1 Like
20

Yes Dave, as you said, fixing these was the answer. I uploaded the jquery.sticky.js file myself and that gave me a working URL reference. bower.json was not needed.

One slight additional problem, paragraph text seems to lighten as it sticks… any help on this would be awesome…

Published Link: http://riaz-london.webflow.com/project-page