就像标题中所说的那样，我可以使用粘性侧边栏来工作。唯一需要关注的是，当用户首次进入页面时，直到用户向下滚动时，侧边栏才完全显示，然后才向上或向下滚动。我想知道JS代码是否有问题或其他问题。我似乎无法使其正常工作>-<
<script>
$( document ).ready(function() {
var $sticky = $('.sidebar');
var $stickyrStopper = $('.sticky-stopper');
if (!!$sticky.offset()) {
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){
var windowTop = $(window).scrollTop();
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'fixed', top: 'initial'});
}
});
}
});
</script>
CSS或html中没有特定内容。 class: sidebar右侧只是一个div，除了它的设计之外，没有任何特定的CSS。我以为会有很多代码，所以我没有在这里发布。让我知道您是否需要它。
<!DOCTYPE html>
<div class="sidebar">
<!-- Office Reservation -->
<asp:Panel ID="pnl_In_Out" runat="server">
<div class="sidebar-sticky">
<!--<div class="container col-md-3" style="margin-top: 0px; position: relative; top:0px">-->
<%--<div class="" style="margin-left: 10px; padding-left:0px; max-width: 240px; width: 100%; position: relative; float: left;">--%>
<div class="office-reservation">
<div class="panel-main panel-primary">
<div class="panel-heading text-center" style="font-size: 15px; color: #444; font-weight: bold;">OFFICE RESERVATION</div>
<hr style="width: 50%; margin-left: auto; margin-right: auto; margin-top: 0px;">
<%--<div class="divider-line" style="width: 90px; border-top: 1px solid #ddd; text-align: center; margin: 0px 50px 0px 70px;"></div>--%>
<div class="panel-body">
<div class="row">
<div class="form-group" style="padding-left: 5px; text-align: left">
<label class="control-label" style="padding-left: 20px; text-align: left; font-size: 14px; color: #444;"><b>In</b></label>
<div class="input-group">
<div class="col-md-12">
<div class="textarea-form">
<asp:TextBox ID="txt_SearchDateFrom" CssClass="form-control form-control-inline input-small date-picker" runat="server"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" style="padding: 3px;"></span>
</span>
</div>
</div>
</div>
<div class="input-group">
<div class="col-md-12">
<div class="">
<asp:DropDownList ID="ddl_SearchTimeFrom" CssClass="form-control text-right" Width="145" Height="35" runat="server"></asp:DropDownList>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time" style="padding: 3px; width: 20px"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group" style="padding-left: 5px; text-align: left">
<label class="control-label" style="padding-left: 20px; text-align: left; font-size: 14px; color: #444;"><b>Out</b></label>
<div class="input-group">
<div class="col-md-12">
<div class="">
<asp:TextBox ID="txt_SearchDateTo" CssClass="form-control form-control-inline input-small date-picker" runat="server"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar" style="padding: 3px"></span>
</span>
</div>
</div>
</div>
<div class="input-group">
<div class="col-md-12">
<div class="">
<%--<asp:TextBox ID="txt_SearchTimeTo" CssClass="form-control timepicker timepicker-no-seconds" Width="145" runat="server"></asp:TextBox>--%>
<asp:DropDownList ID="ddl_SearchTimeTo" CssClass="form-control" Width="145" Height="35" runat="server"></asp:DropDownList>
<span class="input-group-addon">
<span class="glyphicon glyphicon-time" style="padding: 3px; width:20px"></span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="wigdet_input_box" style="padding-top: 5px;">
<asp:Button ID="btn_Reserve" runat="server" Text="RESERVE" CssClass="btn btn-danger" Width="50%" OnClick="btn_Reserve_Time_Click" />
</div>
</div>
</div>
</div>
</div>
</asp:Panel>
<!-- QUICK CONTACT FORM -->
<asp:Panel ID="pnl_Question" runat="server">
<!--<div class="container col-md-3" style="margin-top: 0px; position: relative; top:0px">-->
<%--<div class="" style="margin-left: 10px; padding-left:0px; max-width: 240px; width: 100%; position: relative; float: left;">--%>
<div class="sidebar-sticky2">
<div class="panel-main panel-primary">
<div class="panel-heading text-center" style="font-size: 15px; color: #444; font-weight: bold;">QUESTIONS ?</div>
<hr style="width: 50%; margin-left: auto; margin-right: auto; margin-top: 0px;">
<div class="panel-body">
<div class="row">
<div class="form-group" style="padding-left: 5px; text-align: left">
<div class="input-group">
<div class="col-md-12">
<div class="">
<asp:TextBox ID="txt_Email" CssClass="form-control" Width="145" Font-Size="Small" runat="server" placeholder="Email Address"></asp:TextBox>
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope" style="padding: 3px"></span>
</span>
</div>
</div>
</div>
<div class="input-group">
<div class="col-md-12">
<div class="">
<asp:TextBox ID="txt_Message" TextMode="multiline" Rows="3" Font-Size="Small" CssClass="form-control" class="contact-message" Style="width: 100%!important; height: 70px; resize: none;" runat="server" placeholder="Enter Message"></asp:TextBox>
</div>
</div>
</div>
</div>
</div>
<div class="wigdet_input_box" style="padding-top: 5px;">
<asp:Button ID="btn_Message_Send" runat="server" Text="SEND" CssClass="btn btn-danger" Width="50%" OnClick="btn_Message_Send_Click" />
</div>
</div>
</div>
</div>
</asp:Panel>
<!-- CONTACT INFORMATION -->
<asp:Panel ID="Panel1" runat="server">
<!--<div class="container col-md-3" style="margin-top: 0px; position: relative; top:0px">-->
<%--<div class="" style="margin-left: 10px; padding-left:0px; max-width: 240px; width: 100%; position: relative; float: left;">--%>
<div class="sidebar-sticky3">
<div class="panel-main panel-primary">
<div class="panel-heading text-center" style="font-size: 15px; color: #444; font-weight: bold;">AGENT INFORMATION</div>
<hr style="width: 50%; margin-left: auto; margin-right: auto; margin-top: 0px;">
<div class="panel-body"">
<%--<div class="agent-photo">
<img src="/images/agent_face.jpg" width="80" alt="Agent" style="float: left;" />
</div>--%>
<div class="contact-info" style="text-align: center; color: #444; font-size: 14px;">
<%--<img src="/images/agent_face.jpg" width="150" alt="Agent" />--%>
<h5>Contact Number: </h5><asp:Label ID="lbl_ListingContactPhone" runat="server" Text="none"></asp:Label>
<h5>E-mail Address: </h5><asp:Label ID="lbl_ListingContactEmail" runat="server" Text="none"></asp:Label>
</div>
</div>
</div>
</div>
</div>
和CSS
.sidebar {
float: right;
width: 245px;
margin-left: 850px;
}
.sidebar-sticky {
float: right;
}
.sidebar-sticky2 {
float: right;
}
.sidebar-sticky3 {
float: right;
}
答案 0 :(得分：0)
由于图片不够清晰，无法重现您描述的问题，因此，我只想指出我观察到的方面与您发布的脚本不符。
我还没有充分研究代码的逻辑以确定其正确性或可能的缺乏性。但是我认为脚本中的某些变量应该在滚动期间进行评估，因为页面内容的更改可能会使它们的初始状态无效：
$(document).ready(function() {
// 1. These variables factor in statically to the feature
// and it's appropriate that they are evaluated once
var $sticky = $('.sidebar');
var $stickyrStopper = $('.sticky-stopper');
if (!$sticky.offset()) {
return;
}
$(window).scroll(function() {
var stickOffset = 0;
// 2. These variables factor in DYNAMICALLY to the feature,
// and they must be re-evaluated in alignment with
// changing content for instance.
// --
// Therefore they deserve to be evaluated inside the scroll handler.
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
var windowTop = $(window).scrollTop();
if (stopPoint < windowTop) {
$sticky.css({
position: 'absolute',
top: diff
});
} else if (stickyTop < windowTop + stickOffset) {
$sticky.css({
position: 'fixed',
top: stickOffset
});
} else {
$sticky.css({
position: 'fixed',
top: 'initial'
});
}
});
});
看看是否能为您提供垫脚石。