Browse Source

文章模块分享nav浮动问题

luyanan 8 years ago
parent
commit
fa13214908
3 changed files with 70 additions and 22 deletions
  1. 20 21
      articalInfo.html
  2. 3 1
      css/index.css
  3. 47 0
      js/articalInfo.js

+ 20 - 21
articalInfo.html

74
					<div id="main_content" class="main_content">
74
					<div id="main_content" class="main_content">
75
								
75
								
76
					</div>
76
					</div>
77
					<!--分享操作栏-->
78
					<div class="share-nav">
79
						<div class="clearfix">		
80
							<a class="proinfor floatL" href="information-brow.html" style="display:block;width:64%;">
81
								<div class="headblock floatL" style="width:40px"><img id="proHead" class="headimg headRadius" src="../images/default-photo.jpg" width="100%"></div>
82
								<div class="listtit2 floatL"><span style="margin-right:10px;color: #ff9900;" id="proName"></span><span id="proTitle"></span><span id="proOffice"></span><span id="proOrg"></span><span id="proAddress"></span></div>
83
							</a>
84
							<div class="navOperate floatR">
85
								<span class="wrapicon upTop"></span>
86
							</div>
87
							<div class="navOperate floatR">
88
								<span class="shareBtn shareWeixin">分享至微信
89
									<div class="shareCode">
90
										<div id="qrcode"></div>
91
									</div>
92
								</span>
93
							</div>
94
							<div class="navOperate floatR">
95
								<span class="wrapicon wordHave"></span><span class="message" style="position:relative;top:-7px;left:2px;">24</span>
96
							</div>
77
				</div>
78
				<!--分享操作栏-->
79
				<div class="share-nav">
80
					<div class="clearfix">		
81
						<a class="proinfor floatL" href="information-brow.html" style="display:block;width:64%;">
82
							<div class="headblock floatL" style="width:40px"><img id="proHead" class="headimg headRadius" src="../images/default-photo.jpg" width="100%"></div>
83
							<div class="listtit2 floatL"><span style="margin-right:10px;color: #ff9900;" id="proName"></span><span id="proTitle"></span><span id="proOffice"></span><span id="proOrg"></span><span id="proAddress"></span></div>
84
						</a>
85
						<div class="navOperate floatR">
86
							<span class="wrapicon upTop"></span>
87
						</div>
88
						<div class="navOperate floatR">
89
							<span class="shareBtn shareWeixin">分享至微信
90
								<div class="shareCode">
91
									<div id="qrcode"></div>
92
								</div>
93
							</span>
94
						</div>
95
						<div class="navOperate floatR">
96
							<span class="wrapicon wordHave"></span><span class="message" style="position:relative;top:-7px;left:2px;">24</span>
97
						</div>
97
						</div>
98
					</div>
98
					</div>
99
					
100
				</div>
99
				</div>
101
			</div>
100
			</div>
102
			<div class="resBottom" id="modelScroll">
101
			<div class="resBottom" id="modelScroll">

+ 3 - 1
css/index.css

511
.commentList li{padding:20px 10px;border-bottom:1px dashed #dadada;}
511
.commentList li{padding:20px 10px;border-bottom:1px dashed #dadada;}
512
.commentList li:last-child{border-bottom:1px dashed transparent;}
512
.commentList li:last-child{border-bottom:1px dashed transparent;}
513
.commentsArea .goMsgbox{padding:20px 10px;width: 100%;}
513
.commentsArea .goMsgbox{padding:20px 10px;width: 100%;}
514
.commentsArea .goMsgbox .frmbtn:focus{border:1px solid transparent;}
514
.commentsArea textarea{  
515
.commentsArea textarea{  
515
 	-webkit-user-select: none;
516
 	-webkit-user-select: none;
516
    background-color: #fafafa;
517
    background-color: #fafafa;
517
    color: #b6cad9;
518
    color: #55636D;
518
 	outline: none;
519
 	outline: none;
519
    -webkit-appearance: none;
520
    -webkit-appearance: none;
520
    padding: .2rem;
521
    padding: .2rem;
528
    }
529
    }
529
.commentsArea .msgContbox{width:90%;}
530
.commentsArea .msgContbox{width:90%;}
530
.commentsArea .msgCont{ min-height:160px;width: 100%;padding:4px 6px;margin-left:10px}
531
.commentsArea .msgCont{ min-height:160px;width: 100%;padding:4px 6px;margin-left:10px}
532


+ 47 - 0
js/articalInfo.js

142
						}
142
						}
143
					}
143
					}
144
				}
144
				}
145
				//留言分享操作栏
146
//				var containerH=$("#container").height();
147
//				var resTop=$(".resTop").height();
148
//				var mainH=$('#main_content').height();
149
//				$(document).scroll(function(){
150
//					var top=$(document).scrollTop();
151
//					console.log(containerH-resTop-80);
152
//					console.log(top);
153
//					console.log(mainH);
154
//					if (top <= containerH-resTop-80 && top> mainH) {
155
//						$('.share-nav').addClass('fixed');
156
//					} else{
157
//						$('.share-nav').removeClass('fixed');
158
//					}
159
//				});
160
				
161
			var height=$(".resTop").height()-$(window).height();
162
			var mainH = $("body");
163
			$(window).scroll( function() { 
164
				console.log(height,mainH.scrollTop())
165
			   if(mainH.scrollTop()>=height){
166
			   	$('.share-nav').removeClass('fixed');
167
			   }
168
			   if(mainH.scrollTop()<height){
169
			   	$('.share-nav').addClass('fixed');
170
			   }
171
			} );
172
	
173
						
174
//						var wTop=$(window).height();
175
//						var resTop=$(".resTop").height();
176
//						var o=$(".share-nav");
177
//						var oHeight=o.height();
178
//
179
//						$(document).scroll(function(){
180
//							var aTop=$(window).scrollTop();
181
//							if(aTop>=oHeight && aTop<= (oHeight+wTop-400) || aTop<=oHeight && aTop>=(oHeight-resTop)){
182
//								var l=o.offset().top;
183
//								l+oHeight>aTop+wTop-resTop?o.addClass("fixed"):o.removeClass("fixed")
184
//								
185
//							}else{
186
//								o.removeClass("fixed")
187
//								
188
//							}
189
//						})
190
					
191
					
145
			},
192
			},
146
			error: function() {
193
			error: function() {
147
				return;
194
				return;