Partially "fixed" text- I don't know if this is possible. Any ideas?


#1

I have a headline (Build your brand. Telling your story.) at the top of this site:
http://talewindvisuals.webflow.io/


^^ screen shot of headline ^^

I'd like for it to stay "fixed" in it's position on the screen as you scroll down. Then, once you scroll down to the next section I'd like it to stop just about the "Our goal is..." paragraph and then scroll out of view like normal. (In the designer I currently have the headline in both sections to see what it would look like. I'd like for there to only be one when I'm done.)


^^ screenshot of scroll ~halfway between the sections. ^^


^^ screenshot of what I'd like the end result to look like as the heading "settles" above the paragraph. this is the point where I'd like it to scroll up and out of view like normal ^^

I really hope that makes sense. Is this possible in Webflow? Any help would be much appreciated.


Here is my public share link: LINK


#2

@pritchettnick the current work around is to have multiple versions of the elements and use scroll interactions to set one element to display: block and the other element to display: none on scroll in.

I wish the browser support was there for the "sticky" style property but it's not quite there yet: http://caniuse.com/#search=Sticky

I can throw something together some time to show how to do this interaction type. There are a few other custom code solutions as well but it's possible to build in Webflow without any code. :slight_smile: I'll post an update once I'm back at my computer, if you have any questions please let me know.


#3

Ah, I gotcha! Yea, I would really really appreciate the input @Waldo! Thanks!!


#4

Hey, @Waldo! Any luck with throwing something together yet? I would sincerely appreciate the help!


#5

Just wanted to try and give you one more shout @Waldo to see if you had a chance to put something together walking through the interaction.

Thanks!


#6

Hi @pritchettnick my apologies for the delay, I'll see if I can throw together a quick demo this evening during my off hours :bow: just set a reminder for myself to do so after dinner.


#7

@pritchettnick I tried getting this to work properly with interactions but was having some trouble with rendering appropriately across browsers as typically when I've done it in the past it's just for one element (like a side navigation). The current workaround is to use the CSS Position sticky feature which you'll need to do with custom code. I used it here:
http://sticky-heading.webflow.io/

Read-Only link: https://preview.webflow.com/preview/sticky-heading?preview=3b20590e7a10c212b9c42e77ad4c3746

<style>
.sticky-headline {
position: -webkit-sticky;
  position: sticky;
  top: 0px;}
</style>

Please note that this is a custom code work around and does not yet have full browser support: http://caniuse.com/#search=sticky

Hope that this is helpful :bow:


#8

That's actually what I'm wanting to do. Just one element. The main heading at the top of the page. I've only got the matching heading below in the next section for a frame of reference. So, if it's one element, are you thinking I could accomplish this with just interactions?

Btw, I really like that sticky styling. I might give that a whirl on a personal project sometime. Very cool.


#9

I made a screen recording that I hope explains my goal a little better. It chopped off the last few seconds, but hopefully I explained it well enough for you. Thanks for your help @Waldo!


#10

Hey nick. Here is an example I just made for you that uses only webflow interactions;

Live Link: http://clickart-sandbox.webflow.io/nick-pritchett
Share Link: https://preview.webflow.com/preview/clickart-sandbox?preview=811e1b25b800f0a0037deb5a69d7efa5

Just navigate to the page with your username on it and inspect the structure along with the interactions.


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.