Installing Scroll Follow Sidebar on PenScratch 2

singaporestocksblog · Member · Mar 29, 2017 at 7:46 am
Copy link

Add topic to favorites
Ref to my blog singaporestocksblog.wordpress.com

I am using Penscratch2 as the theme

At present both static pages and posts feature ‘Recent Posts’ on the right coloum. I would like to set to floating i.e. the ‘Recent Posts’ are still visible on the right as you scroll down? An effect like at https://css-tricks.com/examples/ScrollingSidebar/css.php

The code is in tutorial: https://css-tricks.com/scrollfollow-sidebar/ on the “CSS” field.

However I’m not sure if that code will work automatically when added to the site.

Can you please help to check/implement the code for me?

Many thanks.

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Mar 29, 2017 at 9:59 pm
Copy link
Hi there, I took a look at your site, and if someone has a monitor that is 1024px x 768px, or have their window set at around that size, the recent posts widget will not be visible to them, and if we set it to “fixed” then it will stay at that location, out of site to them. See this screenshot: https://cldup.com/CLc87ZQAQ9.png. This would also occur on tablets, but a little more of the widget would be visible since there is less at the top of the window (toolbars, etc.) on them.

You can try the following and see the effect.
```
#content {
  position: relative;
}
#secondary {
  position: fixed;
  right: 0;
}
```
jQuery or Javascript would give us much more control over things, but they are not allowed here at WordPress.com for security reasons. On the CSS Tricks page you reference, scroll down to Concerns and read that. It adds to what I’ve said in my opening paragraph.
singaporestocksblog · Member · Apr 3, 2017 at 2:15 pm
Copy link
Thank you for your response.

I browsed https://css-tricks.com/examples/ScrollingSidebar/css.php on the iPhone and the fixed menu widget doesn’t work. So I’ve decided to drop it.

As for the code you sent, I am a newbie and couldn’t figure where to insert the code. Could you please explain a bit further.

Many thanks!
thesacredpath · Member · Apr 3, 2017 at 7:52 pm
Copy link
Hi, the code I gave you is custom CSS. Go to Customize > CSS, delete all the informational text in that window, and paste it in there.

No items found.