Floating DuckDuckGo Button Example

Scroll down the page to view the code and test...

(Answer to Q&A https://www.sololearn.com/Discuss/2204396/)

QUESTION:
In html, how can i make a button float on the page
even if the page is being scrolled?
Making the button stay on one point of the page,
though it can be moved to whichever part of the page,
it should not slide out of the visble window. How can i do this?

Alfred Juma

ANSWERS:
by setting the css position attribute to fixed
button{
position:fixed;
}

᠌᠌Brains

In general, doing:
#myButton{
position: fixed;
}

should work (assuming your button has an id of "button").
You can also use position: sticky; which will toggle between relative and fixed positioning
depending on the user's current scroll position.
The button will appear to "stick" to the top of the window
if you scroll past a certain point.

I'd also avoid using "button" (or, in general, tag names) as selectors;
using "button" as a selector will apply that styling to ALL buttons.

HealyUnit

The code would look like this:


	<body>
	<head>
	<style>
	div#duck {
		position: fixed;
		bottom: 0;
		right: 5vw;
	}
	</style>
	</head>
	
	</style>
	<body>
	<div id=duck>
		<a href="https://www.duckduckgo.com" 
		target="theDuck"><img src="https://duckduckgo.com/assets/addons/logo.svg" 
		height="45px" target="_blank" alt="theDuck"></a>
	</div>
	</body>

Of course, you could use mouseOver, hover, mouseenter, and mouseleave events
to animate the button with JS as well.

Code Crasher

😎 Floating DuckDuckGo Button 😎