JSDM

HTML

30
 
1
<div class="header">
2
  <h1>这里是头部</h1>
3
</div>
4
<div class="sub-header">
5
  <div class="logo">G+</div>
6
  <ul>
7
    <li><a href="http:/www.jser.com">JSER</a></li>
8
    <li><a href="http://jsdm.com/">JSDM</a></li>
9
  </ul>
10
  <input type="text">
11
</div>
12
13
<article>
14
<p>Updated on November 5.</p>
15
<h1>Curabitur Vulputate, Ligula Lacinia Scelerisque Tempor, Lacus Lacus Ornare</h1>
16
17
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis.</p>
18
19
<h2>Ut In Nulla</h2>
20
21
<p>Porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti.</p>
22
23
<p>Sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit.</p>
24
25
<h2>Nullam In Dui</h2>
26
27
<p>Amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra.</p>
28
29
<p>Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a.</p>
30
</article>
!

CSS

xxxxxxxxxx
87
 
1
.header
2
  width: 100%
3
  height: 88px
4
  padding: 1em
5
  background: #fff
6
  
7
   
8
.sub-header
9
  position: relative
10
  height: 55px
11
  width: 100%
12
  background: #f5f5f5
13
  border-bottom: 1px solid darken(#f5f5f5, 10%)
14
  transition: background 100ms ease-in
15
  
16
  .logo
17
    display: inline-block
18
    height: 55px
19
    width: 55px
20
    margin-left: -55px
21
    background: #DD4B39
22
    color: #fff
23
    text-align: center
24
    padding-top: .25em
25
    font-size: 2em
26
    transition: all 100ms ease-in
27
.on
28
  background: #fff
29
  transition: background 100ms ease-in
30
  
31
ul
32
  display: inline-block
33
  margin-left: 65px
34
  transition: all 100ms ease-in
35
        
36
li
37
  display: inline-block
38
  margin-right: 3em
39
  font-family: lato
40
  
41
    
42
html
43
  height: 100%
44
body
45
  height: 200%
46
  background: #e5e5e5
47
48
  
49
h1
50
  font-size: 2.5em
51
  font-family: lato
52
  font-weight: 900
53
  color: darken(#b5b5b5, 10)
54
  line-height: 1.25em
55
  margin-bottom: calc(1.25em/2)
56
    
57
h2
58
  font-weight: 900
59
  font-size: 2em
60
  font-family: lato
61
  color: darken(#b5b5b5, 10)
62
  line-height: 1.14em
63
  margin-top: 1.14em
64
  margin-bottom: calc(1.14em/2)
65
 
66
p
67
  font-family: lato
68
  line-height: 1.66em
69
  font-size: 1.15em
70
  color: darken(#b5b5b5, 60)
71
  
72
input
73
  width: 180px
74
  height: 28px
75
  border: 1px solid #c8c8c8
76
  outline: none
77
  
78
a 
79
  color: #DD4B39
80
  text-decoration: none
81
  
82
article
83
  padding: 2em 1em
84
*
85
  box-sizing: border-box
86
 
87
@import url(http://fonts.lug.ustc.edu.cn/css?family=Lato:400,900)
!
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

32
 
1
var distance = $('.sub-header').offset().top,
2
    $window = $(window);
3
4
$window.scroll(function() {
5
    if ( $window.scrollTop() >= distance) {
6
        $('.sub-header').css({          
7
          position: "fixed", 
8
          top: 0, 
9
          left: 0
10
        }).addClass("on");
11
      
12
        $(".logo").css({
13
          marginLeft: 0, 
14
        });
15
      
16
        $("ul").css({
17
          marginLeft: 10+"px", 
18
        });
19
    } else {
20
      $('.sub-header').css({          
21
          position: "relative"
22
        }).removeClass("on");
23
      
24
        $(".logo").css({
25
          marginLeft: -55+"px", 
26
        });
27
      
28
        $("ul").css({
29
          marginLeft: 65+"px", 
30
        });
31
    }
32
});
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................