Html position relative scroll

Position Relative to the window

I have a Tumblr account and I’m working on editing the html of it. My question is this: how do I make my side bar be in a certain position but then I scroll down on the page, it stays where it is relative to my browser? For an example of what I’m talking about, click «ask a question» and look at «similar questions» then scroll. I would prefer for it to be in CSS. I have already tried everything I can think of.

4 Answers 4

set the elements css position attribute to fixed and user top / left and margin to place it where you want it to be. Like so:

The above code would vertically center a 200px high div and place it 10px from the left hand border.

This example will show you how to achieve what you’re after! Demo with jquery

The following jquery code is probably the fastest way to achieve what you want with minimal changes to other html/css. Just stick the following code in a document ready function and change the few bits of css as stated below.

$(window).scroll(function()< if($(window).scrollTop() >= 200)< $('anchor3').css(< "margin-top": "80px" >) $('icon').css(< "margin-top": "10px" >) $('oldurl').css(< "margin-top": "296px" >) > else< $('anchor3').css(< "margin-top": 300 - $(window).scrollTop() >) $('icon').css(< "margin-top": 230 - $(window).scrollTop() >) $('oldurl').css(< "margin-top": 516 - $(window).scrollTop() >) > >) 

You need to change the CSS for a3text to make margin-top:60px , remove the position and margin-left attributes, then add display: block

Ideally, you would just have icon , anchor3 , and oldurl inside one container div so that you could just use jquery on the container rather than the three items individually!

But this ought to get you what you’re after (tested on the live tumblr site with FF Scratchpad).

Launch firefox and go to the page: http://thatoneguyoveryonder.tumblr.com/ then open scratchpad (SHIFT + F4) copy/paste the following code and press CTRL+L. It should then say something (in scratchpad) like /* [object Object] */ If that happens scroll down the webpage and watch the magic happen — if this is what you’re after I’ll explain implementing it for you 🙂

$('#sidebar').css(< position:'fixed', top:410, left:700 + 60 + (($(window).width()-940) / 2), "z-index":900 >); $(window).scroll(function()< if($(window).scrollTop() >= 370)< $('#sidebar').css(< top: '30px' >) > else< $('#sidebar').css(< top: 410 - $(window).scrollTop() >) > >) 

Источник

Html page gets a scrollbar when using relative positioning

I have a following problem: my page has an image with items. I put hidden divs over the items to create mouseover effects. I do the positioning of divs vith position relative. Everything works but I get an empty space at the end of the page and a scrollbar 🙁

  
 'width: 124px; height: 620px; border:0;'))?> 'border:0;'))?> 'width: 124px; height: 620px; border:0;'))?> 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

2 Answers 2

Use margin-top instead of top because top create a opposite gap with position:relative.

Set position:relative to their parent div, then use position:absolute on the children.

Related

Absolute positioning of elements produces an unwanted horizontal scrollbar on , though no element exceeds the viewport

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Position relative with overflow and scroll

I have a div with a fixed height, and overflow: auto . In that div , I have a button that shows a small popup when pressed. The popup is using position: absolute , and the entire containing div has position: relative so that the popups do not get clipped by the overflow. My issue is that when I scroll, the popups with absolute position get positioned to where the button is as if there was no scrolling not to where it currently is. How can I get around this? This is a CodePen mimicking my issue: https://codepen.io/Hunky524/pen/jOKxYby When you hover over a grey box, the blue box shows at the top, but if you scroll down, and then hover over a grey box, the blue box becomes mispositioned. This is a screenshot of the issue in my application. You can see my mouse over the button that shows the popup. I would expect the popup to appear where my mouse is, but because I’ve scrolled down a bit, it gets offset.

You would need to position your .item elements relative, so that they become the reference point for the absolute positioning of the children. But that will interfere with the overflow . css-tricks.com/popping-hidden-overflow has a solution that uses a little bit of JS to calculate the correct positions.

if you accept some javascript, check here github.com/pierfarrugia/drop_down_click, dropdown is position on click element

@pierfarrugia I’ll with something like this for now, thanks! Seems really odd that this is how absolute positioning works in a scroll area. What even are the use cases where that it is how it should behave?

@pierfarrugia Something to note though with your solution is it doesn’t seem to work when inside a div with a scrollbar.

@Mark Lisoway, by the way, this drop down click was done for a header menu not exactly in your context. I will check later what’s happening in a div with a scrollbar

Источник

Как создать скроллинг на своем сайте с помощью CSS?

Вы хотите создать эффекты параллакса и скроллинга на странице, но не знаете, с чего начать? Не нужно сразу обращаться к Javascript: есть более простые варианты. В этой статье мы расскажем, как все сделать при помощи СSS-кода. Также объясним, с какими браузерами эффекты работать не станут.

Если нужен плавный скроллинг

Чтобы создать простую прокрутку из одной части страницы в другую, нужно использовать CSS-свойство scroll-behavior. Вот его основные значения:

Так выглядит CSS-код на примере со вторым значением и условным селектором p:

Далее мы покажем на примере, как сделать плавный переход от одной части сайта к другой при помощи значения smooth. В этом случае пользователь увидит переход при нажатии на гиперссылку, ведущую к другой части с текстом.

Пример с HTML-кодом

Шаг 1. Создадим два блока с ссылками друг на друга:

 
 

Плавная прокрутка
 

 
Блок 1
 
Перейди по гиперссылке, чтобы увидеть плавный скроллинг.
 
Нажми сюда, чтобы перейти к Блоку 2.
 

 
Блок 2
 
Нажми сюда, чтобы перейти к Блоку 1.
 

Шаг 2. Добавим плавный скроллинг с помощью кода CSS внутри тега . Код состоит из cвойства scroll-behavior и значения smooth. Еще выберем цвета и высоту для разных частей с текстом: розовый и желтый.

Благодаря значению smooth удалось добиться плавного скроллинга на веб-странице.

Совместимость с браузерами

Свойство scroll-behavior работает почти со всеми популярными браузерами: Google Chrome, Firefox, Safari и Opera. Исключение — Internet Explorer и старые версии браузеров. Например, на Safari версии 15.2–15.3 свойство работать не станет.

Если нужен параллакс

Parallax — это эффект, при котором элементы заднего плана движутся быстрее или медленнее, чем объекты на переднем плане. Например, пользователь прокручивает страницу и видит, что фоновое изображение движется с одной скоростью, а текст — с другой.

Пример с HTML-кодом

В этом случае мы сделаем так, чтобы фоновая картинка вообще не двигалась во время скроллинга.

Шаг 1. Напишем код, в котором будет большой текстовый блок фиолетового цвета:

 
 

 

Прокрутите страницу дальше
 
 
 


Этот текст нужен просто для того, чтобы продемонстрировать эффект. Вам стоит прокрутить страницу вверх и вниз — текстовый блок будет двигаться, а изображение останется на месте. 
 
 
 

Шаг 2. Рассмотрим код CSS. В нем будет ссылка на изображение, которая станет фоновым благодаря значению fixed в свойстве background-attachment.

В итоге получился параллакс на странице.

Примечание. Чтобы убрать этот эффект, достаточно вместо background-attachment: fixed указать в коде background-attachment: scroll. Изображение будет двигаться вместе с текстом:

Совместимость с браузерами

Свойство background-attachment работает с Google Chrome, Firefox, Opera, Internet Explorer и другими браузерами. Исключение — Safari, Android Browser и мобильная версия Opera.

Дополнительные примеры

Чтобы лучше разобраться с CSS-свойствами, рассмотрим другие эффекты для прокрутки на сайте .

Пример 1

По шагам рассмотрим, как добиться эффекта многоуровневого скроллинга . В этом случае несколько объектов на сайте будут двигаться с разной скоростью при прокрутке.

Шаг 1. Напишем две строки следущим образом:

Шаг 2. Добавим CSS-код внутри тега . Сначала укажем параметры и выберем фон на бесплатном фотостоке для блока 2:

Шаг 3. Там же укажем параметры заголовков:

Шаг 4 . Определим параметры других элементов:

В итоге на сайте движутся три объекта. Перечислим их от самого медленного до самого быстрого:

Так выглядит многоуровневый скроллинг.

Пример 2

Рассмотрим, как зафиксировать какой-либо элемент на сайте во время прокрутки. Например, на сайте cloud.timeweb.com есть такой закрепленный блок:

Шаг 1 . Напишем код с двумя текстовыми блоками таким образом:

 

Зафиксированный элемент
 
 

 
 
Элемент 


 

Шаг 2. Напишем следующий CSS-код внутри тега :

При помощи свойства значения fixed удалось сделать так, чтобы элемент двигался вместе с прокруткой.

Пример 3

В этом случае разберемся, как сделать горизонтальный скроллинг.

Шаг 1. Создадим четыре строки текста таким образом:

Шаг 2 . Добавим CSS-код внутри тега . В коде обозначим размеры текстовых блоков и их цвета.

Так выглядит горизонтальная прокрутка страницы, которая условно разделена на несколько частей с текстом.

Заключение

Создание эффекта скроллинга — это несложный процесс. Только при помощи свойств CSS можно сделать так, чтобы пользователь видел необычные переходы между блоками сайта при прокрутке.

В некоторых случаях нужны длинные коды: например, для многоуровневого варианта, при котором каждый блок на странице движется с уникальной скоростью. Но это в любом случае лучше, чем создавать подобные переходы на JavaScript.

Источник