For Blocs sites that have several essays, it would be great to have a sub menu that appears towards the end of an essay to prompt readers to check out other work. In a sense it’s sticky but not, thus my confusion of how to make it work on a page where several blocs are required to layout the essay.
Here’s an example from the MIT technology Review.
Playing with it now but not very optimistic about a solution.
blocman94
So a bloc that has a bunch of links to pages basically.
There are many ways to do this depending on your design.
Yeah, but I need it to float. Comes in halfway down a page scroll and stays in position even as the page continues to scroll down. I’ve done this with main navigations (Hero menu etc.) but never within a page, on the side as you can see in the MIT example where it appears that the page’s two columns scroll in different manners.
Oh right. I didn’t see that on an iPad at first. The side menu scroll off the screen because of the ads below it.
Similar principle to the nav bar. It’s just applying a class that fixes it when you get to a scroll point.
It looks like (and again I’m only on my iPad so can’t look at the HTML) that it scrolls stops and then scrolls again when you get to a certain scroll point with the main content.
That sounds right. Any sense on how to accomplish this? And is there a specific way in which a page needs to be constructed to accomplish this?
It’s not too difficult. You will need to use JavaScript.
Also you need to consider how you want this to manage on smaller breakpoints.
I might actually forgo this on smaller breakpoints. Are there specifics instructions or resources you could point me to here. Love to see if I can nail this down.
So something like this (untested and the CSS probably needs work, I’m not on my mac) add an ID called sidebar to your sidebar menu div.
<style>
#sidebar.side-sticky {
position: fixed;
top: 0px;
}
</style>
<script>
var topSidebar = $('#sidebar').offset().top;
$(window).scroll(function() {
if (topSidebar <= $(window).scrollTop()) {
$('#sidebar').addClass('side-sticky')
} else {
$('#sidebar').removeClass('side-sticky')
}
})
</script>Interesting. I just applied this to no avail. But I did find the article that might help given how I’m trying to implement this. Thanks for pointing me in the right direction.
That’s great, I knew about the sticky attribute, but didn’t realise there was better browser support these days.
Works really well but now I wish I could only make it more dynamic as in this Github example.
Perhaps that’s asking too much of Blocs but is is supported by Bootstrap 4
I wish I wasn’t so stuck on this but it’s a handy feature and one I see on many sites that involve easy navigation between various creative content.
You could very easily use the method from Github. Blocs is fully Bootstrap 4.
One would think. But how? I’ve been examining the HTML/CSS/JS from the Github files and am struggling to see how to incorporate them my Blocs project or the dame files it produces on export.
Hello @blocman94 about 30 days I helped a user, with I think something exactly what you need please try:
Click in the topic I have pictures to explain how.
[Unfortunately “position-fixed” feels like a dead end here. The class doesn’t have a way to customize how the object scrolls and so it sits high and then disappears beneath large footers.]
Actually it does works until you put a footer underneath it and then the column with ‘position-fixed’ attributed to it disappears into that footer.
Hey @Malachiman, I’ve not had much luck using the Github example unfortunately. I’m fine with just using “position-fixed” as long as I can figure out why it scrolls perfectly when no footer is used, but then disappears when a footer is used. I thought applying this class mean the object would remain fixed only within the bloc of the parent object and not move anywhere beyond that. Am I missing something really obvious here?
