Сохранение заголовка всегда в поле зрения

ProgramBox

Сохранение заголовка всегда в поле зрения

Post author:admin
Запись опубликована:6 февраля, 2023
Post category:Вопросы по программированию

#html #css

#javascript #css #HTML

Вопрос:

Я разрабатываю свой веб-сайт и пытаюсь найти способ всегда отображать заголовок на экране.

Для примера взгляните на эту длинную страницу на Wikia.com . Обратите внимание, что при прокрутке страницы маленькая панель инструментов внизу остается на одном месте. Однако прокрутите страницу вниз, и вы поймете, что панель инструментов остается в фиксированном положении, пока не исчезнет из поля зрения.

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

Я попытался посмотреть пример на DynamicDrive.com (найдите Dock Content Script, потому что я не могу опубликовать другую ссылку), но я обнаружил, что это слишком нервно для меня.

Может кто-нибудь, пожалуйста, помочь мне сделать это?

Заранее спасибо.
~ DragonXDoom

PS Теперь, когда я заметил, поле «Как форматировать» справа от страницы отправки вопроса имеет этот эффект.

1. Мой ответ (который принимается OP) был удален из-за мертвой ссылки. Я обновил свой ответ кодом и рабочей демонстрацией на jsfiddle. Я постараюсь, чтобы мой ответ не был удален (я не могу сделать это сам)…

Ответ №1:

Всегда помните, что если вам нужно вставить { position : fixed; } , можно использовать верхний или нижний колонтитулы.

Итак, примените CSS следующим образом:

 .header{
    top:0;
    width:100%;
    height:50px;
    position:fixed;  // this is the key
}

Ответ №2:

HTML:

 <div id="wrap">
    <div id="header"> HEADER </div>
    <div id="navigation"> NAVIGATION </div>
    <div id="content"> CONTENT  </div>        
</div>

JavaScript:

 ( function () {    
    var nav = $( '#navigation' )[0],
        top = $( nav ).offset().top,
        left,
        height = $( nav ).outerHeight(),
        width = $( nav ).width(),
        fixedClass = 'fixed';

    function pageOffset() {
        return window.pageYOffset || document.body.scrollTop;
    }

    $( window ).
            resize( function () {
                left = $( nav ).offset().left;
            }).
            scroll( function () {
                $( nav ).toggleClass( fixedClass, pageOffset() > top );

                if ( $( nav ).hasClass( fixedClass ) ) {
                    $( nav ).
                        css({ 'left': left, 'width': width }).
                        prev().css({ 'marginBottom': height });
                } else {
                    $( nav ).
                        prev().andSelf().removeAttr( 'style' );
                }
            }).
            trigger( 'resize' );    
})();

Живая демонстрация: http://jsfiddle.net/simevidas/Mx8hC/show/

Ответ №3:

Если вы хотите, чтобы он был прикреплен к началу, даже когда пользователь прокручивает (т. Е. Прикреплен к верхней части окна браузера), используйте:

 .top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
}

Или просто на странице:

 .top-bar {
  margin: 0;
  width: 100%;
}

Ответ №4:

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

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

Редактировать: Извините, я неправильно понял, это должно работать и для заголовков.

http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/

http://davidchambersdesign.com/css-fixed-position-headers/

Надеюсь, это поможет.

1. Извините, я должен был быть немного более ясным. Заголовок, на который я пытаюсь повлиять, не является верхним элементом на моей странице. Если я использую position: fixed, то заголовок просто плавает в середине страницы. Я хочу попытаться сделать так, чтобы он действовал как обычный элемент, пока пользователь не прокрутит вниз, чтобы он был вне поля зрения. Тогда я бы хотел, чтобы он действовал так же, как на те заголовки, на которые вы ссылаетесь в своем сообщении. Спасибо, но мне это не помогло.

2. Пытаюсь понять — итак, элемент находится где-то в середине страницы, затем пользователь начинает прокручивать, элемент встречается с верхней частью страницы, а затем «прилипает» там, чтобы стать элементом заголовка, это правильно? Я мог бы рассмотреть решение jQuery. Необходимо ли иметь событие, когда элемент касается верхней части видимого окна просмотра, не уверен, есть ли оно?

Ответ №5:

 //header//

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title>
        <meta name="Description" content="<?php echo $SITE_NAME;?>" />
        <meta name="robots" content="all, index, follow" />
        <meta name="distribution" content="global" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1><?php echo SITE_NAME;?></h1>
    </div>
    <div id="navigation">
    <ul>
    <li><a href="/photosharing/">Home</a></li>
    <!--
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact us</a></li>-->
    </ul>
    </div>
    <div id="content">

//footer


</div>
<div id="footer">
        Copyright amp;copy; <?php echo SITE_NAME.' , '.date('Y');?>
    </div>
</body>
</html>

//css
body,td,th {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
}
body {
    margin-left: 0px;
    margin-top: 30px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.maindiv{ width:690px; margin:0 auto;}
.textbox{ padding:2px 4px; width:200px;}
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;}
#container
{
    margin: 0 30px;
    background: #fff;
}

#header
{
    background: #ccc;
    padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 100%;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content
{
    clear: left;
    padding: 20px;
}

#content h2
{
    color: #000;
    font-size: 160%;
    margin: 0 0 .5em;
}

#footer
{
    background: #ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}