Div is always visible when scrolling (position:fixed, position:sticky) | freeze div | HTML

Праздники ...

Праздники ...

День Октябрьской революции (7 Ноября)

Концерты, выставки ...

Концерты, выставки ...

Спектакль "Дурак вашего мужа"|||г. Минск 9 сентября, 18 сентября, 8 октября, 18 октября 2026

Спорт занятия ...

Спорт занятия ...

Занятия в тренажерном зале

Спорт занятие

Компьютер, программы...

Компьютер, программы...

Объявления ...

Объявления ...

Altvpn.com - Vpn сервис, приватные Proxy

Объявление

Новости ...

Новости ...

обсуждение...

Поиск

Концерты Спорт Форум Компьютер

Компьютер, программы

→

Html & CSS

Div всегда виден при скролинге (position:fixed, position:sticky) | HTML

посмотрели 4428 раз

обновлено: 4 January 2022

1) Используем position:fixed; top:80px; right:50px; Это значит что всегда всегда позиция будет фиксированной и никогда не поменяется

Example we look, we test

Исходный код

Использую style='position:fixed; top:80px; right:50px;'
Это значит что всегда всегда позиция будет фиксированной и никогда не поменяется.

Html

<body>

     <table border='0' width='100%'>
     <tr>
          
          <td width='50%'>
               Day 1<BR>
               Day 2<BR>
               Day 3<BR>
               Day 4<BR>
               Day 5<BR>
               Day 6<BR>
               Day 7<BR>
               Day 8<BR>
               Day 9<BR>
               Day 10<BR>
               Day 11<BR>
               Day 12<BR>
               Day 13<BR>
               Day 14<BR>
               Day 15<BR>
               Day 16<BR>
               Day 17<BR>
               Day 18<BR>
               Day 19<BR>
               Day 20<BR>
               Day 21<BR>
               Day 22<BR>
               Day 23<BR>
               Day 24<BR>
               Day 25<BR>
               Day 26<BR>
               Day 27<BR>
               Day 28<BR>
               Day 29<BR>
               Day 30<BR>
               Day 31<BR>
               Day 32<BR>
               Day 33<BR>
               Day 34<BR>
               Day 35<BR>
               Day 36<BR>
               Day 37<BR>
               Day 38<BR>
               Day 39<BR>
               Day 40<BR>
          </div>

          
          <td width='50%' style='vertical-align:top;'>

               <div style='border:2px solid blue; width:260px;'>Good morning!<BR> Coffee or tea?</div>

               <div style='position:fixed; top:80px; right:50px; border:2px solid green;'>Position=fixed.I want to eat</div>
          </td>
     </tr>
     </table>

</body>

Реузультат

2) Используем position:sticky. Это значит что элемент будет прилегать к верхнему элементу и если не будет в верху элемента то к вверху окошка.

Example we look, we test

Исходный код

Использую style='position:sticky;'
sticky значит что элемент будет прилегать к верхнему элементу и если не будет в верху элемента то к вверху окошка.

<body>

     <table border='0' width='100%'>
     <tr>
          
          <td width='50%'>
               Day 1<BR>
               Day 2<BR>
               Day 3<BR>
               Day 4<BR>
               Day 5<BR>
               Day 6<BR>
               Day 7<BR>
               Day 8<BR>
               Day 9<BR>
               Day 10<BR>
               Day 11<BR>
               Day 12<BR>
               Day 13<BR>
               Day 14<BR>
               Day 15<BR>
               Day 16<BR>
               Day 17<BR>
               Day 18<BR>
               Day 19<BR>
               Day 20<BR>
               Day 21<BR>
               Day 22<BR>
               Day 23<BR>
               Day 24<BR>
               Day 25<BR>
               Day 26<BR>
               Day 27<BR>
               Day 28<BR>
               Day 29<BR>
               Day 30<BR>
               Day 31<BR>
               Day 32<BR>
               Day 33<BR>
               Day 34<BR>
               Day 35<BR>
               Day 36<BR>
               Day 37<BR>
               Day 38<BR>
               Day 39<BR>
               Day 40<BR>
          </div>

          
          <td width='50%' style='vertical-align:top;'>

               <div style='border:2px solid blue; width:260px;'>Good morning!<BR> Coffee or tea?</div>

               <div style='position:sticky; top:10; border:2px solid green;'>Position=fixed.I want to eat</div>
          </td>
     </tr>
     </table>

</body>

Реузультат

← Previous topic
The header in the table is always visible when scrolling | freeze header in table | HTML

Next topic →
How to make a Popup window in a HTML page | Javascript, HTML, CSS

Your feedback ... Comments ...

Объявления

Объявления

HTML elements

• HTML tag <a> link to go to another page

• HTML tag <abbr> shows an abbreviated name, if you let the mouse down there will be a pop-up inscription

• HTML tags fieldset and legend. This is a frame with a title

• HTML tag  comment

• style="border" in the HTML

<BR>

HTML search for an element, elements

• document.querySelector(...) is a JavaScript method for finding an element from document (i.e. in all HTML)

• yourElement.querySelectorAll(...) is a JavaScript method for finding elements inside another HTML element

<BR>

HTML svg (vector graphics for drawing lines, rectangles, ellipses, ...)

• <svg> vector graphics, drawing a line<line>, rectangle <rect>, circle<circle>, text<text>

<BR>

HTML canvas (drawing pictures, text, shapes)

• HTML <canvas> drawing a rectangle

• HTML drawing <canvas> lines by clicking on the Canvas

• HTML <canvas> we draw pictures

• HTML <canvas> we draw a picture with a rotation

• HTML <canvas> draw a picture with horizontal reflection

• HTML <canvas> we draw a picture and text

• HTML <canvas> draw a picture many times in a rectangle (template)

• HTML <canvas> how to get mouse coordinates ? Determine the position of the mouse.

• HTML <canvas> drawing a snake with lines moveTo, lineTo

CSS

• CSS description

• After modifying the file css , the browser displays old styles over and over again. Why?

• Books to study CSS

CSS flex (the element can stretch or shrink and thus fill the free space)

• What is CSS flex

Freeze

• The header in the table is always visible when scrolling | freeze header in table | HTML

• Div is always visible when scrolling (position:fixed, position:sticky) | freeze div | HTML

Do Popup using HTML and Javascript

• How to make a Popup window in a HTML page | Javascript, HTML, CSS

Motion and animation of pictures

• Animation of the little man on the spot. For <div>animation, we use CSS styles: "animation", "background-image", "background-position", "keyframes"

• Animation of a man in motion (sprite). For <div><img>animation we use CSS styles: "animation", "background-image", "background-position", "keyframes"

• Draw a picture with movement. Use the HTML element<canvas>. Use JavaScript for movement: var img = new Image(), img.src = url, drawImage, timer, window.setInterval

• Drawing a picture with movement and animation (sprite). Use the HTML element <canvas>. Use JavaScript for movement: var img = new Image(), img.src = url, drawImage, timer, window.setInterval

Web page on the phone

• I open a web page on my phone in Google Chrome. Why does double-clicking increase the page size?

Layout, page design

• What the Front-end development?

• How to Identify a Device (Tablet, Computer, Phone) Currently Used in JavaScript, HTML

• How to make your site work on a phone, tablet, computer using css media and max-device-width and min-device-width | HTML | CSS

• How to make your website fit in size on your phone, tablet? (HTML meta with attribute name="viewport")

• Correct layout HTML. Bad to use table. You need to use div

• What is Adaptive design? What is responsive design?

• Change the color of the scrollbar for the HTML page. Using CSS

WWW sites for learning

• Sites to explore HTML

Ваши вопросы присылайте по почте: info@dir.by