Here's an example: https://www.waveapps.com/pro-network/
As you begin to scroll the nav-bar will disappear and then re-appear. How might I achieve something like this?
I am using Rails as my framework, along with Twitter Bootstrap.
Any help would be greatly appreciated.
Cheers!
You can set an event handler for the scroll event and use the scrollTop() function to get the current scroll position.
Here's a tutorial: http://www.sutanaryan.com/how-to-create-fixed-menu-when-scrolling-page-with-css-and-jquery/
Related
Context:
I am trying to achieve this --> https://hhk6r.csb.app/
Mock:
Problem:
Scroll to view on the div element does not scroll to the start of the expansion panel.
Docs:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
I have tried using the block:'start' option provided in the docs, not able to figure out where am i going wrong any suggestions would be helpful.
I have created codesandbox to replicate the issue, this is what I have tried till now.
https://codesandbox.io/s/scroll-issue-kyoxf
On top of your current work, you could properly offset the whole thing with
scroll-margin-top: 2rem;
All kudos go to Josh Comeau and his nice tweet that can be found here: https://twitter.com/joshwcomeau/status/1332015868725891076?lang=en
A simple hack is to properly offset the margin top using scroll-margin-top
I'm currently working on a website. I want to have a fixed text (I know how to do that) that changes if you scroll.
So if you're on top of the page it shows '0' and then, while scrolling, the number goes up and up and when you scrolled one viewport-height it should be '10000'.
I think this should be done with javascript, but I'm just a beginner with it. Could you please help me? Thank you very much.
edit
Thanks Ajay for the tip with the onscroll function. But this always just adds a number on scrolling. I want something like this (look at the top left hand corner). Where the size is relative to the position on the site and not the scrolling wheel.
Try using the onScroll event of javascript.
Here is a useful link to learn.
I wanted to implement a function where the page automatically scrolls to the next anchor point (up or down), similar to this page:
http://www.htc.com/ch-de/smartphones/htc-one-m9/
I already have the page somewhat set up (http://www.cubee.ch/wip) and most things run smoothly, but I could not figure out how to scroll to an anchor without a link/click :(
Thanks for any help!
Simon
There is a lot of plugin to make this. Here is one:
https://github.com/alvarotrigo/fullPage.js
I'm looking for pretty much the same navigation function that is used on http://mercertavern.com/ but without the scrollbar itself. I only want it to scroll when a menu item is clicked. Any simple code for this? Everything that is a clue in the right direction is appreciated. Thanks!
In the jQuery plugin selectyze (https://github.com/alpixel/Selectyze) that replace the standard selectbox (dropdown) there is a smal "problem" thats kinda irritating and I hope somebody maybe have a solution.
Problem
When expand the list and then place the pointer to a option and scroll the list scroll to the bottom, then when continue scrolling the page start to scroll also.
Example
http://demos.myjqueryplugins.com/selectyze/
Expand a select-menu then scroll.
Code
https://github.com/alpixel/Selectyze
I hope anybody maybe know what to edit to make the scroll of page stop when scroll in the selectbox. Thanks!
I have done it using this and extending the Selectyze js events.
Lets try it:
http://jsbin.com/ododut/5/