teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問スクロール時のサイドナビの固定とその調整

編集履歴

質問編集履歴

2

コードの修正

2017/07/21 09:54

投稿

kare-mazesoba
kare-mazesoba

スコア12

test CHANGED
File without changes
test CHANGED
@@ -22,79 +22,83 @@
22
22
 
23
23
  <script type="text/javascript">
24
24
 
25
- jQuery(function($) {
25
+ jQuery(function($) {
26
26
 
27
- var nav = $('.side'),
27
+ var nav = $('.side'),
28
28
 
29
- offset = nav.offset();
29
+ offset = nav.offset();
30
30
 
31
- $(window).scroll(function () {
31
+ $(window).scroll(function () {
32
32
 
33
- if($(window).scrollTop() > offset.top) {
33
+ if($(window).scrollTop() > offset.top) {
34
34
 
35
- nav.addClass('fix_nav');
35
+ nav.addClass('fix_nav');
36
36
 
37
- } else {
37
+ } else {
38
38
 
39
- nav.removeClass('fix_nav');
39
+ nav.removeClass('fix_nav');
40
40
 
41
- }
41
+ }
42
42
 
43
- });
43
+ });
44
44
 
45
- });
45
+ });
46
46
 
47
47
  </script>
48
48
 
49
49
  <style>
50
50
 
51
+ *{padding:0;
52
+
53
+ margin:0;
54
+
55
+ }
56
+
51
57
  .fix_nav {
52
58
 
53
- position: fixed;
59
+ position: fixed;
54
60
 
55
- // width:30%;
56
-
57
- z-index: 10;
61
+ z-index: 10;
58
62
 
59
63
  }
60
64
 
61
65
  .side{
62
66
 
63
- width:30%;
67
+ width:30%;
64
68
 
65
- height:150px;
69
+ height:150px;
66
70
 
67
- float:left;
71
+ float:left;
68
72
 
69
- background-color:#ccc;
73
+ background-color:#ccc;
70
74
 
71
75
  }
72
76
 
73
77
  .wrap{
74
78
 
75
- overflow:hidden;
79
+ overflow:hidden;
76
80
 
77
81
  }
78
82
 
79
83
  .main{
80
84
 
81
- width:70%;
85
+ width:70%;
82
86
 
83
- height:1000px;
87
+ height:400px;
84
88
 
85
- float:right;
89
+ float:right;
86
90
 
87
- background-color:#ccf;
91
+ background-color:#ccf;
88
92
 
89
93
  }
90
94
 
91
95
  .footer{
92
96
 
93
- width:100%;
97
+ width:100%;
94
98
 
95
- height:500px;
99
+ height:1000px;
96
100
 
97
- background-color:#cac;
101
+ background-color:#cac;
98
102
 
99
103
  }
100
104
 
@@ -102,26 +106,24 @@
102
106
 
103
107
  <div class="wrap">
104
108
 
105
- <div id="fixedBox" class="side">
109
+ <div id="fixedBox" class="side">
106
110
 
107
- side
111
+ side
108
112
 
109
- </div>
113
+ </div>
110
114
 
111
- <div class="main">
115
+ <div class="main">
112
116
 
113
- main
117
+ main
114
118
 
115
- </div>
119
+ </div>
116
120
 
117
121
  </div>
118
122
 
119
123
  <div class="footer">
120
124
 
121
- footer
125
+ footer
122
126
 
123
127
  </div>
124
128
 
125
-
126
-
127
129
  ```

1

問題コードの修正

2017/07/21 09:54

投稿

kare-mazesoba
kare-mazesoba

スコア12

test CHANGED
File without changes
test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
  jQuery(function($) {
26
26
 
27
- var nav = $('.side'),
27
+ var nav = $('.side'),
28
28
 
29
29
  offset = nav.offset();
30
30
 
@@ -52,40 +52,76 @@
52
52
 
53
53
  position: fixed;
54
54
 
55
- top: 1%;
56
-
57
- min-width:200px;
55
+ // width:30%;
58
-
59
- width:11.8vw;
60
56
 
61
57
  z-index: 10;
62
58
 
63
59
  }
64
60
 
61
+ .side{
62
+
63
+ width:30%;
64
+
65
+ height:150px;
66
+
67
+ float:left;
68
+
69
+ background-color:#ccc;
70
+
71
+ }
72
+
73
+ .wrap{
74
+
75
+ overflow:hidden;
76
+
77
+ }
78
+
79
+ .main{
80
+
81
+ width:70%;
82
+
83
+ height:1000px;
84
+
85
+ float:right;
86
+
87
+ background-color:#ccf;
88
+
89
+ }
90
+
91
+ .footer{
92
+
93
+ width:100%;
94
+
95
+ height:500px;
96
+
97
+ background-color:#cac;
98
+
99
+ }
100
+
65
101
  </style>
102
+
103
+ <div class="wrap">
104
+
105
+ <div id="fixedBox" class="side">
106
+
107
+ side
108
+
109
+ </div>
110
+
111
+ <div class="main">
112
+
113
+ main
114
+
115
+ </div>
116
+
117
+ </div>
118
+
119
+ <div class="footer">
120
+
121
+ footer
122
+
123
+ </div>
66
124
 
67
125
 
68
126
 
69
- <div id="fixedBox" class="side">
70
-
71
- <ul>
72
-
73
- <li id="side_web"><a href="#1">Web予約はこちらから</a></li>
74
-
75
- <li id="side_doc"><a href="#2">歯科人間ドック</a></li>
76
-
77
- <li id="side_whit"><a href="#3">ホワイトニング</a></li>
78
-
79
- <li id="side_cld"><a href="#4">小児歯科</a></li>
80
-
81
- <li id="side_vis"><a href="#5">訪問歯科</a></li>
82
-
83
- <li id="side_acv"><a href="#6">アーカイブ</a></li>
84
-
85
- <li id="side_rec"><a href="#7">歯科衛生士求人サイト</a></li>
86
-
87
- </ul>
88
-
89
- </div>
90
-
91
127
  ```