Jump to content
  • Sign Up
  • 0

Прилипание блока к видимым границам


serzh82saratov
 Share

Question

Всем привет! Я тут новичок, не пинайте сразу если что.

Требуется аналог position sticky для IE (в режиме совместимости с 7).

Надо чтобы в одну строку текст с кнопками и с пунктирной линией проходящей под ними посередине в любой ситуации прилипал к левой и правой границе окна, то есть чтобы не участвовал в горизонтальной прокрутке, но прокручивался вертикально. Также при растягивании окна, текст за которым следуют кнопки находились слева на 20%.

19509846.png

То есть если сдвинуть скролл, строка с красной полоской должна остатся на месте, если растянуть окно, то красная полоса растягивается, "( Title )" немного сдвигается вправо.

Надеюсь более менее объяснил, заранее спасибо.

Забыл сказать, таких линий на форме 10 - 20 штук.

Edited by serzh82saratov
Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0

В режиме совместимости с 7 версией z-index не работает, но это ладно, с фоном может что решу, главное что в примере оно не участвует в вертикальной прокрутке.

Edited by serzh82saratov
Link to comment
Share on other sites

  • 0
 <script type=""text/javascript"">
   window.onscroll = function() {
    var fixDiv = document.getElementsByClassName('fix');
    for(var i = 0; i < fixDiv.length; i++){
        fixDiv[i].style.left = document.body.scrollLeft;
   }
}
   </script>

 

Тормоза одинаковы заметны с одним или несколькими элементами.

Link to comment
Share on other sites

  • 0

С pageYOffset > 1 хорошо выглядит.

Не могу под себя сделать, выдаёт ""$" не определено". Возможно ближе к приведённому мной синтаксису сделать?

И такой косяк https://jsfiddle.net/5851uerw/ сдвигаем вправо, опускаем до конца, поднимаем и видим смещение.

Даже не так, сдвигаем вправо, опускаем и сразу видим смещение.

Edited by serzh82saratov
Link to comment
Share on other sites

  • 0

там через jquery сделано, если не хотите его подключать, не сложно в инете найти нужные команды на js

в вашем случае нужно через цикл пробегать по всем .fixDiv и для каждого проверять if(window.pageYOffset > this.offsetTop) 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • Алеся
      By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • gumuch
      By gumuch
      Добрый день. Нуждаюсь в помощи/совете! 
      В корне сайта (html) создал блок с позиционированием, написал в нем номер телефона и почту. На большом мониторе блок отображается нормально, а вот если зайти через смартфон то данный блок налазит на картинку и я никак не могу это изменить..., игрался с позиционированием (absolute, fixed, relativ и т.д.) но получаю на выходе либо прикрепленный блок к верхнему левому краю либо он налазит на картинку. Подскажите, что я делаю не так? 
      Сам сайт: http://2metra.com/
      Вот код который я прописал:
       
    • Боков Глеб
      By Боков Глеб
      Компоновка: типичный блок .Wrapper, который имеет ширину 100% от ширины окна, и центровщик (margin: 0 auto;) с указанными min-width и max-width:
      В IE следующий баг: Wrapper почему-то заканчивается раньше, чем надо, а центровщик с содержимым перекрывает следующую такую же компоновку ниже:

      Такой баг был замечен уже практически на свёрстанном лендинге, а потому было очень трудно сделать минимальный работающий пример. Я постарался убрать весь лишний HTML для данного примера, но CSS тоже самое было сделать очень трудно.
      Если Вы запустите пример в IE (ещё раз повторюсь, что в других браузерах всё нормально), то увидите следующее:

      На StackOverflow уже несколько недель никто не может найти решение (оно и понятно: в разметке-то ошибок нет, это просто баг IE, но с ним надо что-то делать, потому что пользователи IE, увы, ещё превышают критическую отметку 10%). Вот только что удалось выяснить: если контейнеру .FlexPageLayoutWithFixedHeaderAndBottomFooter-Wrapper для основного содержимого (под header) задать min-height вместо height, то отображение станет нормальным. К сожалению, такое решение не годится потому, что исчезнет "прилипание" header-а кверху. Можно, конечно, прилепить его и другими способами, но хотелось бы избежать задания его абсолютной высоты, так как это противоречит концепции адаптивной вёрстки.
    • мурамаса
      By мурамаса
      Добрый день, столкнулся с такой проблемой. Верстая страницу заключал изображения в тег <div> с определенным класом и в css, задаю им позицию какую хочу видеть у себя в браузере. например
      .content-bar2 { float: right; position: absolute; top: 300px; right: 50px; } Так вот когда я несколько элементов так размещаю, один над одним, то у меня в браузере все отоброжается нормально. Но открыв с другого компьтера, получилос так что одно изображение наезжает на другое, что это и с чем связано и как это вылечить. И если не сложно обьясните пожалуйста особенности position: absolute.
      Как я понимаю float и absolute вместе не работают ?
      Как я понимаю float и absolute вместе не работают ? 
      При том еще есть проблема, когда я уменьшаю окно браузера, контент как бы сжимается в непонятную хурму, друг на друга, как это исправить ?
    • mr.relax
      By mr.relax
      Есть страница, c:
      body { 
      max-width: 1200px;
      margin: auto;
      }
      т.е. контент посередине. 

      Вопрос: есть блок <footer>, как средствами CSS сделать его "привязанным" к низу страницы так, чтобы он был одного размера с body? И соответственно менял размеры, если у body меняется. 
      Ну например: окно браузера уменьшили...

      footer {
      position: fixed;
      bottom: 0;
      }

      "привязывает" <footer> к низу, но растягивает по ширине экрана.
  • Обсуждения

    • Sider
      Всем спс сам розобрался.
    • Nicolyasic
      Вот хороший пример "Рандомайзер слов из списка". Тут вместо дивов с картинками инпуты, но сути дела не меняет. Кроме того работает с разным кразмером списка (код универсальный). Если в сорсе код найдешь увидишь как работает — там 3 строчки с тем же Math.random. Если будут трудности пиши тут, я оповещение увижу кину тебе код оттуда + объясню шо как. Вообще прикольно так можешь посмотреть другие страницы на сайте, потренироваться с js (для начала как раз пойдет).   Ну я вовремя конечно 
    • SAVC
      Пытаюсь динамически сформировать группу элементов <input type="checkbox"> Элементы создаются, но не получается задать им надпись, хотя раньше, создавая их вручную в HTML, всё получалось..   vk-groups-3.html vk-groups-1.html наладил.. vk-groups-3.html
    • Bobbi86
      Вы отучились на бухгалтера или программиста? Почему спрашиваю. Я финансист, бухгалтер. Естественно, в свое время отучился на курсах 1С, но как экономист. Поэтому могу помочь с развитием именно в этом направлении, так как опыт огромный. 
    • Sider
      Всем привет.Не так давно начал изучать верстку.И кароче захотел создать слайдер на основе html css без js. Застрял булеты работают и стрелки также но только стрелки становяться видимы когда первый раз нажал на булет.До этого их никак немогу настроить.   <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .wrapper{             width: 700px;             height: 400px;             margin:0 auto;             border:5px solid green;             border-radius: 20px;             overflow: hidden;             position: relative;         }         .container{             width: 600px;             height: 300px;             border: 5px solid green;             border-radius: 20px;             margin: 20px auto;         }         .slider__items{             display: none;         }         .bullets{             display: flex;             position: absolute;             left:100px;             bottom:30px;         }         .bullets__items{             width: 50px;             height: 15px;             border:2px solid green;             border-radius: 20px;             background-color: lightgreen;             margin: 0 20px;         }             .images{             display: flex;         }         .images__items{             width: 600px;             height: 300px;             border-radius: 20px;             margin-right: 55px;         }               .arrows__prev{             background-image: url(./img/next.png);             background-size: contain;             width: 40px;             height: 40px;             position: absolute;             top:150px;             left: 2px;         }         #slide1:checked ~ .images .image1{             margin-left: 0;         }         #slide2:checked ~ .images .image2{             margin-left: -655px;         }         #slide3:checked ~ .images .image3{             margin-left: -1310px;         }         #slide4:checked ~ .images .image4{             margin-left: -1965px;         }         #slide5:checked ~ .images .image5{             margin-left: -2620px;         }         #slide1:checked ~ .arrow__next .img2,         #slide2:checked ~ .arrow__next .img3,         #slide3:checked ~ .arrow__next .img4,         #slide4:checked ~ .arrow__next .img5,         #slide5:checked ~ .arrow__next .img1{             display: block;             background-image: url(./img/next.png);             background-size: contain;             width: 40px;             height: 40px;             position: absolute;             top:150px;             right: 2px;                 }         #slide1:checked ~ .arrow__prev .img5,         #slide2:checked ~ .arrow__prev .img1,         #slide3:checked ~ .arrow__prev .img2,         #slide4:checked ~ .arrow__prev .img3,         #slide5:checked ~ .arrow__prev .img4         {             display: block;             background-image: url(./img/prev.png);             background-size: contain;             width: 40px;             height: 40px;             position: absolute;             top:150px;             left: 2px;                 }     </style> </head> <body>     <div class="wrapper">         <div class="container">             <div class="slider">                 <input type="radio" name="slider" class="slider__items" id="slide1">                 <input type="radio" name="slider" class="slider__items" id="slide2">                 <input type="radio" name="slider" class="slider__items" id="slide3">                 <input type="radio" name="slider" class="slider__items" id="slide4">                 <input type="radio" name="slider" class="slider__items" id="slide5">                                 <div class="bullets">                     <label for="slide1" class="bullets__items"></label>                     <label for="slide2" class="bullets__items"></label>                     <label for="slide3" class="bullets__items"></label>                     <label for="slide4" class="bullets__items"></label>                     <label for="slide5" class="bullets__items"></label>                 </div>                 <div class="arrow__next">                     <label for="slide1" class="arrows__item img1"></label>                     <label for="slide2" class="arrows__item img2"></label>                     <label for="slide3" class="arrows__item img3"></label>                     <label for="slide4" class="arrows__item img4"></label>                     <label for="slide5" class="arrows__item img5"></label>                 </div>                 <div class="arrow__prev">                     <label for="slide1" class="arrows__item img1"></label>                     <label for="slide2" class="arrows__item img2"></label>                     <label for="slide3" class="arrows__item img3"></label>                     <label for="slide4" class="arrows__item img4"></label>                     <label for="slide5" class="arrows__item img5"></label>                 </div>                 <div class="images">                     <img src="./img/1.jpg" alt="" class="images__items image1">                     <img src="./img/2.jpg" alt="" class="images__items image2">                     <img src="./img/3.jpg" alt="" class="images__items image3">                     <img src="./img/4.jpg" alt="" class="images__items image4">                     <img src="./img/5.jpg" alt="" class="images__items image5">                 </div>             </div>         </div>     </div> </body> </html>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy