I am writing an sticky cookie bar and with a click button (a huge X).
But the X is to much to the right (almost not on the page).
How can I make sure the X is aligned the right way
Firstly I have made the sticky div for the cookie bar.
On the left I have the information about the cookie bar.
But on the right I want to make it closable
.sticky {
position: -webkit-sticky;
position: sticky;
bottom: 0;
background-color: #242421;
padding: 10px;
width: 100%;
font-size: 20px;
position: fixed;
opacity: 0.9;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.sticky p {
font-size: 14px;
}
.sticky u {
font-weight: bold;
}
.sticky button {
float: right;
background: none;
border: 0;
box-sizing: border-box;
color: transparent;
cursor: pointer;
line-height: 40px;
outline: none;
overflow: hidden;
padding: 0;
position: relative;
text-transform: uppercase;
transition: all 0.2s ease-in;
width: 40px;
}
.sticky button::before,
.sticky button::after {
background-color: white;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
transform-origin: center left;
transition: all 0.2s ease-in;
width: 100px;
z-index: -1;
}
.sticky button::before {
top: 0;
transform: rotate(45deg);
}
.sticky button::after {
bottom: 0;
transform: rotate(-45deg);
}
.sticky button:hover {
color: black;
}
.sticky button:hover::before,
.sticky button:hover::after {
height: 30px;
transform: rotate(0deg);
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sticky">
<p>My Text <u>More
information
and cookie settings</u>
<button>
Close
</button></p>
</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu,
lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,
sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d
</p>
</body>
</html>
You actually do not use position: sticky this property is overridden by position: fixed. Also the width: 100%of the fixed container is making the element too wide, as you want to use a padding of 10px. You may either use box-sizing: border-box; or this: where only leftand right is used.
.sticky {
bottom: 0;
background-color: #242421;
padding: 10px;
font-size: 20px;
position: fixed;
opacity: 0.9;
left: 0;
right: 0;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.sticky p {
font-size: 14px;
}
.sticky u {
font-weight: bold;
}
.sticky button {
float: right;
background: none;
border: 0;
box-sizing: border-box;
color: transparent;
cursor: pointer;
line-height: 40px;
outline: none;
overflow: hidden;
padding: 0;
position: relative;
text-transform: uppercase;
transition: all 0.2s ease-in;
width: 40px;
}
.sticky button::before,
.sticky button::after {
background-color: white;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
transform-origin: center left;
transition: all 0.2s ease-in;
width: 100px;
z-index: -1;
}
.sticky button::before {
top: 0;
transform: rotate(45deg);
}
.sticky button::after {
bottom: 0;
transform: rotate(-45deg);
}
.sticky button:hover {
color: black;
}
.sticky button:hover::before,
.sticky button:hover::after {
height: 30px;
transform: rotate(0deg);
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sticky">
<p>My Text <u>More
information
and cookie settings</u>
<button>
Close
</button></p>
</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi
lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu,
lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,
sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed
ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui
eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis
dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut
aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum
ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc
venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue
eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem
egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
</p>
</body>
</html>
Just add
margin-top:-10px;
width: 50px;
To the sticky button.
Just clear some of the top margins, and increase the width by 10px so that when you hover over it, the text is also aligned.
Also, don't use position: sticky;, position:fixed is well suited for this purpose and also add
box-sizing: border-box;
to your whole div to include the padding and border in the element's total width and height.
.sticky {
bottom: 0;
background-color: #242421;
padding: 10px;
width: 100%;
font-size: 20px;
box-sizing: border-box;
position: fixed;
opacity: 0.9;
color: white;
font-family: Arial, Helvetica, sans-serif;
}
.sticky p {
font-size: 14px;
}
.sticky u {
font-weight: bold;
}
.sticky button {
float: right;
background: none;
border: 0;
box-sizing: border-box;
color: transparent;
cursor: pointer;
line-height: 40px;
outline: none;
overflow: hidden;
padding: 0;
position: relative;
text-transform: uppercase;
transition: all 0.2s ease-in;
margin-top: -10px;
width: 50px;
}
.sticky button::before,
.sticky button::after {
background-color: white;
content: "";
display: block;
height: 1px;
left: 0;
position: absolute;
transform-origin: center left;
transition: all 0.2s ease-in;
width: 100px;
z-index: -1;
}
.sticky button::before {
top: 0;
transform: rotate(45deg);
}
.sticky button::after {
bottom: 0;
transform: rotate(-45deg);
}
.sticky button:hover {
color: black;
}
.sticky button:hover::before,
.sticky button:hover::after {
height: 30px;
transform: rotate(0deg);
}
body {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="sticky">
<p>My Text <u>Meer
informatie
en cookies instellen</u>
<button>
Close
</button></p>
</div>
<p>Some example text..</p>
<h2>Scroll back up again to "remove" the sticky position.</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula,
facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae
dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla
et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis
in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis.
Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas
odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna
a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non
fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula
venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus
congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh
tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl
est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi,
sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus.
Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor
vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac.
In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum
augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet
sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque
enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit
risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas
nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum
nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim
ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum
augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet
sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis
sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla
congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque
enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit
risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar
nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas
nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum
nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo
purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget,
auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in
</p>
</body>
</html>
Run code snippetHide results
Related
I have a page on my site that has a lot of text on the right hand side, and I have an image on the left hand side. I want that image to stay with the user as they scroll through the text.
Set the image's parent element to position:relative, then set the image's element to position:sticky and top:0. The image will now 'stick' to it's location even if the user scrolls away from it.
You could use position fixed I believe. I adapted this example from w3schools..
https://www.w3schools.com/howto/howto_css_sticky_element.asp
body {
display: flex;
}
div.fixed {
position: fixed;
top: 0;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png");
width: 100px;
height: 100vh
}
p { margin-left: 150px}
<div class="fixed">fixed</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
I'm making a page with some text, but I want to insert an image to the right of the text. I managed to make the text wrap around the image, but it seems I cannot move the image except right and left of the text. I would like to move vertically the image.
And here is my code for the image:
img {
width: 20%;
height: auto;
margin: 10px;
}
#test {
float: right;
}
<img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur
lorem. Nam condimentum neque in tempor sollicitudin. Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque
varius dapibus mi. Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo. Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor. Aliquam a dolor
ac massa tempus mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl
dapibus non. Morbi urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur
non magna libero. Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus
finibus ornare. Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor
ornare, ultricies magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur. Sed semper lacus
lectus, sagittis rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien.
Suspendisse volutpat vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce
lobortis enim ac nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc,
sagittis eu tempor in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
Could someone help me ?
shape-outside can do it
img {
width: 20%;
height: auto;
margin: 10px;
float: right;
/* use the same value inside margin and shape-outside */
shape-outside: inset(100px 0 0 0);
margin-top: 100px;
}
p {
text-align: justify;
}
<img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur lorem. Nam condimentum
neque in tempor sollicitudin. Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque varius dapibus mi.
Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo. Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor. Aliquam a dolor ac massa tempus
mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl dapibus non. Morbi
urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur non magna libero.
Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus finibus ornare.
Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor ornare, ultricies
magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur. Sed semper lacus lectus, sagittis
rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien. Suspendisse volutpat
vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce lobortis enim ac
nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc, sagittis eu tempor
in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
You can move the image down, while still keeping it floated right, by positioning it in amongst the text. However, where it exactly appears in relation to the surrounding text depends on the viewport dimensions i.e. how the text can round it.
img {
position: relative;
width: 20%;
height: auto;
margin: 10px;
}
#test {
float: right;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur lorem. Nam condimentum neque in tempor sollicitudin. <img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png"/>Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque varius dapibus mi. Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo.
Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor.
Aliquam a dolor ac massa tempus mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl dapibus non.
Morbi urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur non magna libero. Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus finibus ornare. Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor ornare, ultricies magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur.
Sed semper lacus lectus, sagittis rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien. Suspendisse volutpat vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce lobortis enim ac nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc, sagittis eu tempor in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
I want to scroll the content in child div from by keeping mouse pointer in the grey area.
1
Scroll from white area is not very smart. You can only stop it when hovering the gray area.
div {
width: 300px;
height: 200px;
overflow: hidden;
background-color: lightgray;
}
.scroll {
transition: 10s linear;
display: inline-block;
margin-top: 0;
}
.scroll:hover {
margin-top: -600px;
}
<div><span class="scroll">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat iaculis lorem, vitae pharetra orci faucibus eleifend. Praesent urna sapien, consequat nec hendrerit sit amet, convallis in turpis. Integer sollicitudin ullamcorper eros, nec egestas
odio semper nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur consequat lobortis dolor, vel dignissim metus euismod non. Quisque a arcu ut nisi mattis ullamcorper. Nullam et tortor facilisis, imperdiet mi in, varius leo. Nullam
euismod et neque a laoreet. Aliquam erat volutpat. Phasellus dui libero, vehicula vitae turpis ac, facilisis tincidunt quam. Phasellus faucibus purus et mattis blandit. Sed convallis fermentum elit, eget aliquam nisl scelerisque et. Etiam lorem odio,
ultricies a tortor at, mollis scelerisque est. Nunc mi velit, porttitor non laoreet quis, semper et justo. Praesent dignissim orci sit amet venenatis tempor. Integer hendrerit lorem a aliquam eleifend. Nulla nibh sem, faucibus quis finibus et, volutpat
ut sapien. Ut consectetur magna tellus, eget condimentum orci facilisis sit amet. In hac habitasse platea dictumst. Sed gravida, magna quis sagittis hendrerit, lorem erat consectetur lacus, laoreet congue ligula justo eget tellus. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Curabitur aliquet, felis vel pretium consequat, nibh sapien feugiat felis, non finibus erat libero ac lacus. Vivamus molestie augue sagittis varius posuere. Cras nec neque non lectus ultrices lacinia. Nulla nec
consequat elit, a blandit enim. Pellentesque nec ultricies tortor. Etiam efficitur justo convallis nibh faucibus, in sagittis quam tempus. Curabitur purus ex, venenatis a turpis quis, tincidunt malesuada eros. Aenean at magna sed eros ullamcorper viverra.
Phasellus vehicula nisl vitae ligula posuere, nec convallis sem vehicula.
</span></div>
On OS X scrollbars in the browser have native platform styling. I'd actually like to have this style also on other platforms. I know it's possible on Chrome to customize the look of the scrollbars. Is there any way I can achieve the "OS X look" using CSS on other platforms in Chrome?
since you are working on an app in a webkit based device it's worth taking a look at https://css-tricks.com/custom-scrollbars-in-webkit/
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
<html>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis magna eget efficitur viverra. Vestibulum feugiat felis maximus condimentum blandit. Etiam fringilla urna non libero malesuada pretium. Nulla facilisi. Nam finibus lacinia dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi aliquam eros a tellus rhoncus, sit amet efficitur est sollicitudin. Donec id felis nec sem tempus tempus. Vestibulum convallis elit non rutrum commodo.
Nullam viverra consequat est eu fringilla. Nunc ut turpis vulputate, scelerisque sem sed, mattis ligula. Nullam eu arcu ultrices, sagittis urna in, gravida velit. Nullam porta tempor mauris ac molestie. Nunc et orci interdum erat efficitur condimentum quis ut nulla. Donec accumsan tincidunt congue. Cras sollicitudin sit amet metus rhoncus convallis. Vestibulum scelerisque augue sit amet sapien varius venenatis. Sed non orci in dui varius tincidunt nec ac lectus. Suspendisse blandit, neque in efficitur posuere, augue risus aliquet sem, id sagittis turpis nisi non erat. Duis est lectus, egestas sit amet suscipit eu, ultricies non nisi. Phasellus dui lacus, iaculis eget condimentum vel, pulvinar placerat tortor. Etiam pellentesque leo nec egestas dictum.
Quisque euismod sodales est ac aliquet. Pellentesque porttitor mi aliquet cursus maximus. Nullam tincidunt non diam interdum laoreet. Aenean vel cursus odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque cursus, nibh quis semper tempor, felis justo dignissim turpis, eget accumsan leo nisl viverra sapien. Vestibulum quis vestibulum turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur mauris ante, mollis eget iaculis ut, feugiat non dui. Nullam quis mi ornare, porta metus quis, accumsan augue. Curabitur accumsan tempus aliquam. Vestibulum elementum at lectus in auctor. Donec consectetur eleifend purus consectetur pellentesque.
Ut porttitor est at magna laoreet, sit amet vestibulum sem suscipit. Vivamus eget erat congue, tincidunt tellus et, elementum augue. Nulla sit amet est iaculis, elementum massa sit amet, bibendum enim. Duis mollis, velit et hendrerit dictum, ligula tortor laoreet dui, eget aliquet felis dolor sed massa. Suspendisse potenti. Fusce iaculis nisl non velit bibendum, quis placerat nisi interdum. Maecenas faucibus ligula non pulvinar laoreet. Fusce sagittis massa ut lorem facilisis, in ullamcorper velit tristique. Morbi a facilisis elit. Sed blandit nulla at scelerisque scelerisque.
Praesent rhoncus tincidunt diam quis auctor. Maecenas blandit commodo commodo. Pellentesque quis dolor id urna maximus tristique vitae id lectus. Phasellus convallis accumsan nibh ac ornare. Pellentesque hendrerit ex in rutrum ultrices. Aenean nisi eros, bibendum non metus ac, tincidunt hendrerit lorem. Cras feugiat, augue et auctor auctor, felis libero sagittis justo, ac pulvinar quam arcu eu dolor. Praesent lectus mauris, molestie in elit quis, scelerisque consectetur lectus. Phasellus ac scelerisque leo. Nullam eget interdum sapien. Suspendisse et urna sodales, venenatis augue ac, volutpat nisi. Mauris non fermentum nibh.
Proin nec augue et lectus congue pretium. Nullam orci nibh, sagittis vitae ex in, iaculis viverra erat. Praesent vitae lorem urna. Sed mi nibh, accumsan eget fringilla vitae, gravida non orci. Aenean justo massa, finibus non aliquet quis, fermentum et odio. Donec scelerisque est nunc, sit amet vulputate libero sodales a. Integer placerat felis eu enim porttitor tristique. Phasellus vestibulum tempus magna. Quisque commodo sodales dignissim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt nisi eget purus dapibus, quis pharetra magna bibendum. Sed id gravida lorem. Quisque dui quam, imperdiet id ultricies nec, ultrices non lacus. In blandit, sapien non laoreet volutpat, elit orci pharetra magna, in volutpat lacus elit nec metus. Ut eu vulputate sapien. Aliquam dictum, orci nec lacinia vestibulum, massa elit sollicitudin nisl, faucibus facilisis massa neque vestibulum eros.
Cras sed aliquam leo. Proin porttitor tincidunt enim, eget luctus justo. Aenean ultricies non urna quis interdum. In elit purus, ultrices et mollis sed, ullamcorper finibus ante. Vestibulum fringilla erat at orci ornare, eu vestibulum risus tincidunt. Proin a mauris quam. Ut dignissim ullamcorper volutpat. Sed tincidunt porta ornare. Donec sed ullamcorper mauris. Nulla mauris leo, egestas a eleifend ac, convallis a augue. Phasellus sollicitudin lorem ac sapien luctus finibus. Proin nec nisl dictum, consequat metus lacinia, pellentesque magna. Nam posuere hendrerit turpis, sit amet venenatis nisi congue sed. Suspendisse dui sem, placerat non felis sit amet, scelerisque cursus risus.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla cursus pharetra felis, a porta nunc convallis ac. Nullam laoreet lorem ultrices nisl gravida, at rutrum nisl condimentum. Curabitur ac faucibus dolor. Nullam hendrerit maximus mi, pulvinar venenatis ex tincidunt nec. Sed ullamcorper sit amet dolor eu venenatis. Ut sodales in orci sed tempor. Nullam nisl quam, convallis sit amet nulla id, vulputate sagittis est. Suspendisse egestas viverra quam, eget gravida massa luctus rhoncus. Nulla leo magna, commodo non maximus venenatis, ultricies eget mi. Quisque arcu magna, vehicula ac leo vel, gravida feugiat leo. Praesent at accumsan urna. Sed semper, nunc sed aliquam euismod, metus ex dignissim nisl, et dictum leo nibh quis dolor. Duis et purus quis augue aliquam lobortis ut eget ipsum.
Vestibulum pretium dignissim dolor, vel efficitur nisl vestibulum et. In aliquet ultricies eleifend. Donec tempor diam at pellentesque pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum imperdiet eu urna sit amet vestibulum. Ut sagittis odio nec sapien dapibus porttitor. Mauris lorem nibh, tempor non mi vel, vulputate fringilla libero. Sed varius massa eu metus elementum rhoncus. Phasellus vel interdum felis. Sed nec vulputate diam.
Integer tempus mattis aliquet. Nulla fermentum ex nec vestibulum bibendum. Aliquam in metus quis velit sollicitudin ornare quis et arcu. Fusce vitae ligula at libero pretium tincidunt. Praesent finibus metus nec posuere viverra. Nullam ac mattis mauris, ut vehicula enim. Proin efficitur fringilla mi sed maximus. Donec vel tempor nibh. Duis malesuada mauris et eros ultricies sollicitudin. Sed eget elementum libero. In vulputate lectus a ipsum eleifend, vel feugiat ex ornare.
</body>
</html>
Here is some code that I made a while back. You can take it and customize the scroll bar any way you want.
Try it in this jsfiddle: http://jsfiddle.net/wLD49/
HTML:
<div class="container">
<div class="scrollable">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sagittis blandit lectus tempus aliquam. Aenean tempor libero odio, in gravida dui laoreet vitae. Duis porttitor, sem id convallis rhoncus, enim dolor volutpat nibh, vel sollicitudin arcu tortor eget elit. Vestibulum eu eros in ante rutrum porttitor. Quisque volutpat faucibus est, cursus suscipit nisi tincidunt sit amet. Proin leo odio, aliquam ac rutrum eget, rutrum quis dui. Nam tincidunt, diam at fringilla rhoncus, mi lacus faucibus sem, eu dapibus nunc felis ac nisl.
</div>
<div class="scrollbar"></div>
</div>
</div>
CSS:
.container {
width: 200px;
height: 100px;
overflow: hidden;
border: 1px solid blue;
position: relative;
}
.scrollable {
overflow-x: hidden;
overflow-y: auto;
width: 100%;
height: 100%;
padding-right: 30px;
}
.content {
/* 10px for the scroll bar plus some extra spacing */
padding-right: 12px;
}
.scrollbar {
width: 8px;
height: 25px;
background-color: lightblue;
border-radius: 4px;
position: absolute;
right:0;
top: 0;
}
.scrollable:hover .scrollbar {
background: blue;
}
JavaScript:
var scrollables = document.getElementsByClassName('scrollable');
scrollables[0].addEventListener('scroll', scrolled);
function scrolled(e) {
var content = this.getElementsByClassName('content')[0];
var scrollingRange = content.offsetHeight - this.offsetHeight;
var scrollingRatio = this.scrollTop / scrollingRange;
var scrollbar = this.getElementsByClassName('scrollbar')[0];
var scrollbarRange = this.offsetHeight - scrollbar.offsetHeight;
scrollbar.style.top = String(scrollingRatio * scrollbarRange) + 'px';
console.log(scrollingRatio, scrollbarRange);
}
Goal:
Make the candy picture as a link that the user can press them.
Problem:
I don't know how to do it based on the code below.
Info:
*Please remember that the link is a actionlink from asp.net mvc.
*Please remember that it is the candy picture should be the link, not the text.
*Dont forget to make the page into a full screen after you have pressed the "Run the snippet"
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<div id="foo">
aaa
</div>
<div id="fooo">
bbb
</div>
p {
font-size: 24px;
}
#foo {
position:fixed;
right:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
#fooo {
position:fixed;
left:0;
display:block;
top:400px;
width:128px;
height:128px;
background: #f00 url('http://icons.iconarchive.com/icons/uiconstock/50-free-christmas/128/candy-2-icon.png') no-repeat 50% 50%;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Ut dapibus aliquet imperdiet. Maecenas gravida sagittis eros, nec vestibulum lacus sagittis at. Nulla enim dui, ultricies a quam id, placerat placerat erat. Donec pretium orci purus, eget tristique neque mattis eget. Nullam mattis accumsan urna et faucibus. Praesent tincidunt lobortis tortor, maximus tincidunt neque cursus luctus. Sed in rutrum lacus. Nunc volutpat fringilla diam. Curabitur accumsan, est sed mattis ultricies, augue quam suscipit nisi, sit amet lobortis erat lorem in nunc. Nullam sagittis vulputate placerat. Nullam fringilla arcu id purus pretium, sed fringilla ligula aliquam.</p>
<p>Morbi quis mauris condimentum, accumsan nunc ac, porttitor nibh. Pellentesque maximus dolor nisi, eget bibendum nibh feugiat mollis. Donec lacinia turpis vulputate, viverra sapien in, aliquam metus. Etiam posuere, urna at dapibus placerat, lacus dolor imperdiet lorem, sit amet efficitur ante dui efficitur est. Cras quis tincidunt sapien. Fusce sit amet ultricies mauris. Mauris sit amet faucibus velit. Pellentesque non leo ante.</p>
<p>Sed eget lacus sodales, porttitor justo non, ornare magna. Phasellus pulvinar porta eros eget ultricies. Aliquam ante lectus, ultricies vel iaculis nec, posuere quis sapien. Praesent nisi purus, fermentum nec tortor sagittis, efficitur consectetur ipsum. Vivamus condimentum velit sed dictum fringilla. Mauris eu vulputate neque, eu ornare justo. Ut iaculis et libero nec lobortis. Quisque euismod quam felis, sed imperdiet enim feugiat fermentum. In viverra turpis molestie luctus elementum. Vestibulum quis vulputate massa. Praesent convallis congue dolor nec ornare. Aliquam lobortis est vitae lorem tempor viverra.</p>
<p>Duis commodo congue porttitor. Aenean nunc arcu, ultricies semper cursus a, euismod eget orci. Etiam tempus aliquam nisl non tristique. Fusce lobortis sagittis enim, id mattis magna semper congue. Nulla ornare venenatis ante, hendrerit sagittis dolor ultricies nec. Praesent varius sit amet odio quis lobortis. Praesent quis egestas sem, eget dignissim felis. Pellentesque risus enim, viverra a blandit in, laoreet sed quam. Duis et congue risus, sed consequat massa. Nunc non pharetra tortor. Morbi elementum magna vitae rutrum pulvinar. Donec sit amet leo arcu.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut varius sagittis tincidunt. Donec consectetur sem vitae lorem finibus dictum. Pellentesque cursus sollicitudin eros vitae ullamcorper. Praesent consectetur posuere metus vel dictum. Mauris vitae fringilla libero. Fusce dui leo, bibendum a porttitor ullamcorper, scelerisque vitae quam. Praesent laoreet magna nisi, sit amet luctus quam condimentum vel. Phasellus aliquam nec sem sed eleifend. Donec hendrerit semper efficitur. Sed malesuada nisi quis arcu accumsan tincidunt. Mauris rutrum nisl lorem, a ullamcorper massa pharetra at. Pellentesque et risus sit amet massa finibus consequat eget vitae nibh.</p>
<a href="#" id="foo">
<span>aaa</span>
</a>
<a href="" id="fooo">
<span>bbb</span>
</a>
You would need to use Url.Action to get the URL corresponding to the relevant action. The following code snippet would map to the "Foo" and "Fooo" actions of your controller.
<a id="foo" href='#Url.Action("Foo", "ControllerName")'>
<span>aaa</span>
</a>
<a href='#Url.Action("Fooo","ControllerName")' id="fooo">
<span>bbb</span>
</a>
seeing the containing div is position fixed, you can make the a tag absolute and define left, right, top and bottom...
#foo a {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-indent: -99999px
}
I bet that's the shortest way. But i really don't like inline js...
Still:
<div
onclick="javascript:window.location.href='#Url.Action("Foo", "ControllerName")';
return false;"
id="foo">
</div>
Also it's better to add div { cursor: pointer; } to your css, if you want to show that's the href.