Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.54/13: Рейтинг темы: голосов - 13, средняя оценка - 4.54
0 / 0 / 0
Регистрация: 04.09.2015
Сообщений: 1
1

Фиксированная шапка

04.09.2015, 14:46. Показов 2623. Ответов 1
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Добрый день! Я новечек, пытаюсь сделать фиксированную шапку с прокруткой.
Подскажите где ошибка?
Html
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<!--[if lt IE 7]><html lang="ru" class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html lang="ru" class="lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html lang="ru" class="lt-ie9"><![endif]-->
<!--[if gt IE 8]><!-->
<html lang="ru">
<!--<![endif]-->
<head>
    <meta charset="utf-8" />
 
    <title>Заголовок</title>
    <meta content="" name="description" />
    <meta content="" property="og:image" />
    <meta content="" property="og:description" />
    <meta content="" property="og:site_name" />
    <meta content="website" property="og:type" />
 
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="x-rim-auto-match" content="none">
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <link rel="shortcut icon" href="favicon.png" />
 
    <link rel="stylesheet" href="libs/bootstrap/bootstrap-grid-3.3.1.min.css" />
    <link rel="stylesheet" href="libs/font-awesome-4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="libs/fancybox/jquery.fancybox.css" />
    <link rel="stylesheet" href="libs/owl-carousel/owl.carousel.css" />
    <link rel="stylesheet" href="libs/countdown/jquery.countdown.css" />
    <link rel="stylesheet" href="css/fonts.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/media.css" />
    <script type="text/javascript">
    $(document).ready(function(){
        //фиксированная шапка при скроле
    $("#header").removeClass("default");
    $(window).scroll(function(){
        if ($(this).scrollTop() >10) {
            $("#header").addClass("default").fadeIn('fast');
            } else {
                $("#header").removeClass("default").fadeIn('fast');
            };
        });
    });
    </script>
</head>
<body>
    <header>
        <div id="header" class="top_line">
            <div class="container">
                <div class="row">
                    <div class="col-md-5">
                        <div class="top_addr">
                            <strong>Москва</strong>
                            <a href="#map">д. 16 кор.4</a>                         
                        </div>
                    </div>
                    <div class="col-md-2"></div>
                    <ul class="nav">
                     <li><a href="#home">Главная</a></li>
                     <li><a href="#home">Главная</a></li>
                     <li><a href="#home">Главная</a></li>
                    </ul>
                    <div class="col-md-5"></div>
                </div>
            </div>
            </div>
 
            </header>
            <p>Текст (от лат. textus — «ткань; сплетение, связь, сочетание») — зафиксированная на каком-либо материальном носителе человеческая мысль; в общем плане связная и полная последовательность символов.
 
Существуют две основные трактовки понятия «текст»: «имманентная» (расширенная, философски нагруженная) и «репрезентативная» (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.
 
В лингвистике термин текст используется в широком значении, включая и образцы устной речи. Восприятие текста изучается в рамках лингвистики текста и психолингвистики. Так, например, И. Р. Гальперин определяет текст следующим образом: «это письменное сообщение, объективированное в виде письменного документа, состоящее из ряда высказываний, объединённых разными типами лексической, грамматической и логической связи, имеющее определённый моральный характер, прагматическую установку и соответственно литературно обработанное»[1].</p>
<p>Текст (от лат. textus — «ткань; сплетение, связь, сочетание») — зафиксированная на каком-либо материальном носителе человеческая мысль; в общем плане связная и полная последовательность символов.
 
Существуют две основные трактовки понятия «текст»: «имманентная» (расширенная, философски нагруженная) и «репрезентативная» (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.
 
В лингвистике термин текст используется в широком значении, включая и образцы устной речи. Восприятие текста изучается в рамках лингвистики текста и психолингвистики. Так, например, И. Р. Гальперин определяет текст следующим образом: «это письменное сообщение, объективированное в виде письменного документа, состоящее из ряда высказываний, объединённых разными типами лексической, грамматической и логической связи, имеющее определённый моральный характер, прагматическую установку и соответственно литературно обработанное»[1].</p>
<p>Текст (от лат. textus — «ткань; сплетение, связь, сочетание») — зафиксированная на каком-либо материальном носителе человеческая мысль; в общем плане связная и полная последовательность символов.
 
Существуют две основные трактовки понятия «текст»: «имманентная» (расширенная, философски нагруженная) и «репрезентативная» (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.
 
В лингвистике термин текст используется в широком значении, включая и образцы устной речи. Восприятие текста изучается в рамках лингвистики текста и психолингвистики. Так, например, И. Р. Гальперин определяет текст следующим образом: «это письменное сообщение, объективированное в виде письменного документа, состоящее из ряда высказываний, объединённых разными типами лексической, грамматической и логической связи, имеющее определённый моральный характер, прагматическую установку и соответственно литературно обработанное»[1].</p>
<p>Текст (от лат. textus — «ткань; сплетение, связь, сочетание») — зафиксированная на каком-либо материальном носителе человеческая мысль; в общем плане связная и полная последовательность символов.
 
Существуют две основные трактовки понятия «текст»: «имманентная» (расширенная, философски нагруженная) и «репрезентативная» (более частная). Имманентный подход подразумевает отношение к тексту как к автономной реальности, нацеленность на выявление его внутренней структуры. Репрезентативный — рассмотрение текста как особой формы представления знаний о внешней тексту действительности.
 
В лингвистике термин текст используется в широком значении, включая и образцы устной речи. Восприятие текста изучается в рамках лингвистики текста и психолингвистики. Так, например, И. Р. Гальперин определяет текст следующим образом: «это письменное сообщение, объективированное в виде письменного документа, состоящее из ряда высказываний, объединённых разными типами лексической, грамматической и логической связи, имеющее определённый моральный характер, прагматическую установку и соответственно литературно обработанное»[1].</p>
    <div class="hidden">sdsdsd</div>
    <!-- Mandatory for Responsive Bootstrap Toolkit to operate -->
    <div class="device-xs visible-xs"></div>
    <div class="device-sm visible-sm"></div>
    <div class="device-md visible-md"></div>
    <div class="device-lg visible-lg"></div>
    <!-- end mandatory -->
    <!--[if lt IE 9]>
    <script src="libs/html5shiv/es5-shim.min.js"></script>
    <script src="libs/html5shiv/html5shiv.min.js"></script>
    <script src="libs/html5shiv/html5shiv-printshiv.min.js"></script>
    <script src="libs/respond/respond.min.js"></script>
    <![endif]-->
    <script src="libs/jquery/jquery-1.11.1.min.js"></script>
    <script src="libs/jquery-mousewheel/jquery.mousewheel.min.js"></script>
    <script src="libs/fancybox/jquery.fancybox.pack.js"></script>
    <script src="libs/waypoints/waypoints-1.6.2.min.js"></script>
    <script src="libs/scrollto/jquery.scrollTo.min.js"></script>
    <script src="libs/owl-carousel/owl.carousel.min.js"></script>
    <script src="libs/countdown/jquery.plugin.js"></script>
    <script src="libs/countdown/jquery.countdown.min.js"></script>
    <script src="libs/countdown/jquery.countdown-ru.js"></script>
    <script src="libs/landing-nav/navigation.js"></script>
    <script src="libs/bootstrap-toolkit/bootstrap-toolkit.min.js"></script>
    <script src="libs/maskedinput/jquery.maskedinput.min.js"></script>
    <script src="libs/equalheight/jquery.equalheight.js"></script>
    <script src="libs/stellar/jquery.stellar.min.js"></script>
    <script src="js/headhesive.min.js"></script>
    <script src="js/common.js"></script>
    <!-- Yandex.Metrika counter --><!-- /Yandex.Metrika counter -->
    <!-- Google Analytics counter --><!-- /Google Analytics counter -->
    <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
CSS
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
*::-webkit-input-placeholder {
    color: #666;
    opacity: 1;
}
*:-moz-placeholder {
    color: #666;
    opacity: 1;
}
*::-moz-placeholder {
    color: #666;
    opacity: 1;
}
*:-ms-input-placeholder {
    color: #666;
    opacity: 1;
}
 
body input:focus:required:invalid,
body textarea:focus:required:invalid {
    
}
body input:required:valid,
body textarea:required:valid {
    
}
body {
    font-family: "RobotoRegular", sans-serif;
    font-size: 16px;
    min-width: 320px;
    position: relative;
}
.hidden {
    display: none;
}
.carousel img {
    width: 100%;
    height: auto;
}
.parallax {
    background-attachment: fixed;
    background-position: 50% 0;
    position: relative;
}
header{
  background-image: url(../img/body.jpg);
  background-repeat: repeat-x;
  min-height: 791px;
  background-position: top center;
  position: relative;
  background-repeat: no-repeat;
}
#top_line{
    min-height: 90px;
    -webkit-box-shadow: rgba(255,255,255,.3) 0 0 0 1px;
    box-shadow: rgba(255,255,255,.4) 0 0 0 1px;
    position: absolute;
    top: 10px;
    width: 100%;
    background-color: rgba(255,255,255,.86);
}
 
#header.default{
    position: fixed;
    top: 0;
    background: #fff;
}
 
.top_addr{
    padding-left: 60px;
    background-image: url(../img/home2.png);
    background-repeat: no-repeat;
    background-position: center left;
}
.top_addr strong {
    color: #eeeeee;
    display: block;
    font-weight: normal;
    text-transform: uppercase;
}
.headhesive{
    background: #000;
    position: fixed;
    width: 100%;
    transform: translateY(-50%);
}
 
.headhesive--stick{
    transform: translateY(0);
}
 
.nav{
    float: right;
    padding-top: 5px;
}
.nav li{
    float: left;
    margin-right: 35px;
}
.nav li:last-child{margin-right: 0;}
.nav a{
    text-transform: uppercase;
    font: 14px Arial, sans-serif;
    
}
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
04.09.2015, 14:46
Ответы с готовыми решениями:

Фиксированная шапка
Как сделать шапку фиксированной? Вот код: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta...

Фиксированная шапка сайта
есть сайт elo-boost.ru Подскажите как сделать фиксированную шапку как тут elo-boost.net В каком...

Фиксированная (плавающая) шапка и скролинг
Доброго времени суток. Такой вопрос: фиксированную шапку я сделал но нужно чтобы ее можно было...

Фиксированная шапка большой таблицы
Здравствуйте. Не могу решить казалось бы простую задачу.. Имеется большая таблица с кучей строк...

1
5 / 5 / 9
Регистрация: 24.06.2015
Сообщений: 64
05.09.2015, 10:04 2
CSS
1
2
3
.header {
   position: fixed;
}
0
05.09.2015, 10:04
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
05.09.2015, 10:04
Помогаю со студенческими работами здесь

Шапка резиновая и фиксированная - реал?
Шапка сайта, без JQ-наворотов - должна быть резиновой и фиксированной (при прокрутке - остается на...

Фиксированная шапка сайта с логотипом и горизонтальным меню
Здравствуйте! Проблема состоит в следующем: Ширина страницы 1980px, ширина заполняемого контента...

фиксированная панель
Здравствуйте!!! Подскажите как зафиксировать панель внизу экрана. Размер экрана значения не...

Фиксированная вёрстка
Ребята подскажите какой технический подход использовать чтобы вёрстка не разьежалась ничего с ней...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru