Javascript 类的添加太早，导致侧栏'；跳转'；
我曾尝试在JSFIDLE中重现这个问题，但不幸的是我不能。基本上，我使用下面的JavaScript在边栏中添加一个Javascript 类的添加太早，导致侧栏'；跳转'；,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我曾尝试在JSFIDLE中重现这个问题，但不幸的是我不能。基本上，我使用下面的JavaScript在边栏中添加一个fixed类，一旦它超过阈值。当侧边栏的底部到达其父容器的底部（#content）时，应该添加底部类 基本上，我正在尝试这样做： 你可以在上看到这个的实时版本。试着向下滚动，你就会明白我的意思 目前，我的测试站点位于。在主页上，您可以看到添加了fixed类，但是添加bottom类太早，导致侧边栏在到达底部之前跳到底部 JavaScript jQuery(window).scroll
fixed#content底部fixedbottomjQuery(window).scroll(function () {
var threshold = 654;
if (jQuery(window).scrollTop() >= threshold)
jQuery('#sidebar').addClass('fixed');
else
jQuery('#sidebar').removeClass('fixed');
var position = jQuery("#content").position();
var content_top = position.top;
var check = (jQuery('#content').height() + content_top) - jQuery('#sidebar').height();
if (jQuery(window).scrollTop() >= check)
jQuery('#sidebar').addClass('bottom');
else
jQuery('#sidebar').removeClass('bottom');
});
很抱歉，我没有JSFIDLE，但是有人愿意看看这个站点，看看是什么导致了这个问题吗？我也愿意花钱请人帮我解决这个问题。这样做怎么样： 实际上，在if语句中需要更多的参数，还需要require和elseif 在我的笔中，我将其设置为检测页眉的高度，检测滚动到页脚的距离，然后相应地添加和删除类
$(document).ready(function() {
var $sidebar = $('.sidebar');
var headerHeight = $('header').outerHeight() - 20; // Change happens 20px sooner now
var heightToFooter = $('.wrap').outerHeight() + headerHeight - $('.sidebar').outerHeight() - 20;
var scrollTop = $(window).scrollTop();
$(window).scroll(function() {
scrollTop = $(this).scrollTop();
if (scrollTop >= headerHeight && scrollTop < heightToFooter) {
$sidebar.addClass('fixed');
} else if (scrollTop > headerHeight && scrollTop >= heightToFooter) {
$sidebar.removeClass('fixed');
$sidebar.addClass('bottom');
} else {
$sidebar.removeClass('fixed');
$sidebar.removeClass('bottom');
}
});
});
$（文档）.ready（函数（）{
变量$sidebar=$（'.sidebar'）；
var headerHeight=$（'header'）.outerHeight（）-20；//现在更改发生的时间提前了20px
var heightToFooter=$（'.wrap'）.outerHeight（）+headerHeight-$（'.sidebar'）.outerHeight（）-20；
var scrollTop=$（窗口）.scrollTop（）；
$（窗口）。滚动（函数（）{
scrollTop=$（this.scrollTop（）；
如果（scrollTop>=头部高度（&scrollTop<到门的高度）{
$sidebar.addClass（'fixed'）；
}否则如果（scrollTop>headerHeight&&scrollTop>=heightToFooter）{
$sidebar.removeClass（'fixed'）；
$sidebar.addClass（'bottom'）；
}否则{
$sidebar.removeClass（'fixed'）；
$sidebar.removeClass（'bottom'）；
}
});
});
top:20px；bottom:autotop:auto；底部：20px我一直发现，使用auto重置位置值的解决方案在放置具有不同位置属性的div时非常有用
2） 只需从headerHeight和heightToFooter变量中减去数字20即可。函数的作用是：给我们一个不带“px”的数字，所以我们不需要从中减去20px。这样做会比以前更快地添加20px类。我想我理解您的问题，不久前我创建了类似的东西
希望能有帮助
HTML
<div id="contentContainer">
<div id="headerContent">
<p>Lorem ipsum dolor sit amet, materia amicis in. Nescimus de memor nostris qui dicens hoc, sui Care genitorem ipsam mecum est Apollonius. Apollonii corporis optime re est cum unde meae ceroma fronte comico hac navi quia. Filiae multi capillos quam crucis coniunx minus, 'Ipsius dum autem nobiscum paulo aureos fecit. Cupis ei primum subsannio oculos ut sua in fuerat eum in modo invenit! Civitate virginitatis tibi alloquitur hanc enim materiam. Tyrio alius ut casus adprehendens lugubri vestigia o inter. Filia navem auditum rationem superius dixisti 'membris data profectus ait in rei civibus laude clamaverunt donavit erat. Hellenico clamabat vidit loco dedit erat votum faciente humana gaudet uxoris tibi cum obiectum dixit hoc ait Cumque autem nobiscum. Ex hic nisi ductus vehor matrimonio accipiam. Facere potest ei primum subsannio oculos ne velocitate mare convivio.</p>
</div>
<div id="bodyContent">
<h1>Left menu sticks when scrolled to page top</h1>
<p>01. Lorem ipsum dolor sit amet, materia amicis in. Nescimus de memor nostris qui dicens hoc, sui Care genitorem ipsam mecum est Apollonius. Apollonii corporis optime re est cum unde meae ceroma fronte comico hac navi quia. Filiae multi capillos quam crucis coniunx minus, 'Ipsius dum autem nobiscum paulo aureos fecit. Cupis ei primum subsannio.</p>
<p>02. Peracta licet tali hac insultare mortuorum meus. Allocutus ait est Apollonius ut libertatem non dum, videns sed esse ait Cumque hoc. Sic genero coruscus eum ego quod non solutionem invenisti naufragus habuisti sit Mariae maximas hanc legibus Antiochiam innocentem si. A his singulare tertio eam est cum autem illud cenam ita cum unde. Hanc si mihi quidditas iter patri. Nomen ibique parvulam eodem mulier autem illud meae ad quia ei. Boreas quam cara die ad nomine sed eu fugiens laudo in deinde plectrum anni ipsa quod non ait. Indulgentia pedes rex Dionysiadi suo aperuit. Antiochus sed dominum vidit D</p>
<p>03. Mauricii materialia sola ait Cumque ego quod una, ex quae ait in fuerat construeret cena. Coram posset Denique laetare in lucem concitaverunt in fuerat. Notus ingreditur ipse dignitatem in lucem in lucem exempli paupers coniunx minus. Iuravi potest meum festinus pervenissem. Eiusdem ordo quos annorum nostros versi tuam, neptuno ait Cumque materia puella est cum! Accedens est amet consensit cellula filia in modo ad te, singulas cotidie hoc ambulare est cum unde non solutionem innocentem tantusque </p>
<p>04. Sic ut a his domino Lycoridem in deinde vero non potentiae quem es illum decidat quam crucis in. Communicatio mihi cum suam ut casus tui convenientibus ne videret quaeritur vero diam ille advenit ego Pentapolim Cyrenaeorum tertia! X domum Taliarchus disponis a a civitas Conservus mihi, abstulit meis caligine tempestas sabano praeclusoque sponte profundo. Christe in rei sensibilium iussit hoc, coniunx caritate completae ad nomine Hesterna. Domini includeret Tharsiam Hellenicus sui coniungens in modo. Itaque completum ad quia illum decidat quam dolore cruciatus in modo invenit ubi ait. Neptune reddens pater in modo cavendum es ego quod ait regem consolatus dum est amet Cur meae. Aliquid se ad suis ut sua confusus eos. Cyrenaeam plus quem es ego esse ait! Cives ego Pentapolim Cyrenaeorum tertia veni illis atque ut a a. Domus filia omnes deo adiuves finem volo, fit proponebat vidit Dionysiadi suo celaturos Tantus puella. Neptunalia festinare decenter ortam pectore villicus. Toro frumento manu certas parturiens a, christe in lucem in lucem.</p>
<p>05. Iacentem in lucem in modo invenit ubi diu desideriis meo, nisi se vero diam ' Apollonium sit aliquip ipsa mihi. Palpat venas tanquam vero quo sanctis venias in lucem exitum vivit. Palpat venas tanquam vero rex ut a, animae ait est se ad per te. Horreo Athenagora secundum ei primum gaudet uxoris tibi alloquitur vidit ad per. Pertulit sed dominum sit in lucem exempli paupers. Disce Apollonius non ait Cumque ego esse deprecor, sic genero nomine Maria cum magna amici rex. Inter tua vero quo sanctis venias in. Pater ostendit Apollonius in lucem genero nomine Stranguillio in fuerat construeret cena reges. Quod non coepit cenam veniebant est in modo invenit nutricis suo. Theophilo ex civibus corporis particularis mortem sunt amore excitat si mihi Tyrum in fuerat. Eam ad suis Tyrium coniugem in modo cavendum es sed haec.</p>
<p>06. Scelus euismod tollam impedit mecum loci haec, re est in modo cavendum es. Aderit omnia claustrum Bone de tuae infami cum. Quidditas tuo lugenti permittis enim ad nomine Hesterna studiis ascende ad te finis puellam materia ad per. Suam ad quia iuvenis naves. Nulla enim ad te in rei exultant deo adiuves finem, abiecto hac auxilium super audire servi Dianae non solutionem invenerunt. Amen ad suis Tyrium coniugem Chaldaeorum in modo genito in. Curro vicina haec sed quod tamen cursu agis cives perfusa commendavit patris Tyrius tu illum vero diam ille eum. Ascendi in modo invenit iuvenem discessum adulta quid ait in rei completo litus sua coniuge sancta justo forma in. Video qui enim materiam individuis qui dicens hoc Apollonius. Gaudeo in modo compungi mulierem volutpat. Autem est cum autem nobiscum laetitia haec sed eu fides se ad per animum est Apollonius mihi. Scola veniamus est in deinde plectrum anni ipsa Invitamus me. Toto determinata diebus paululum seclusit in rei civibus nescis haec.</p>
<p><a class="showContent" href="#">Expand / Contract Content</a></p>
<div class="collapsable">
<p>06a. Introivit dic gubernius eum est cum magna. Alia qui auri Neptunus spatia tribulatione ad suis ut sua. In fuerat est amet Cur meae in deinde plectrum anni ipsa quod non potentiae. Navis fortiter quam cara in rei civibus in deinde duas recitare. Horreo Athenagora mihi cum suam ut a. Dionysiadis eum filiam sum ad nomine sed dominum vidit pater. Volentes mihi cum suam vidit Dionysiadi. Mea vero quo accumsan in deinde duas particularis dedit beneficio, communicatio mihi servitute coniunx efficerer nuptiarum civibus unde tu.</p>
<p>06b. Dicentem Austri ventriculum defunctae cubiculo forma anima te princeps audito claudi in rei sensibilium iussit in rei finibus veteres hoc. Potentiam suos exteriores non ait in fuerat accidens quam dicentes multa dolores in fuerat se vero non ait. Num praebeo deum roseo commendavit fideliter harena in lucem. Spero mihi cum suam non dum veniens indica enim formam cum obiectum est cum magna. Nomen ibique parvulam eodem mulier quae vero non solutionem inveni. Laetare in fuerat accidens inquit merui litore, tharsos princeps age cum obiectum est in. Celebrantur nuptias iam est amet Cur meae in deinde cepit roseo commendavit fideliter harena in. Veniente mihi servitute coniunx efficerer nuptiarum cui Tharsia Theophilo ex hic ait est se in.</p>
</div>
<p>07. Introivit dic gubernius eum est cum magna. Alia qui auri Neptunus spatia tribulatione ad suis ut sua. In fuerat est amet Cur meae in deinde plectrum anni ipsa quod non potentiae. Navis fortiter quam cara in rei civibus in deinde duas recitare. Horreo Athenagora mihi cum suam ut a. Dionysiadis eum filiam sum ad nomine sed dominum vidit pater. Volentes mihi cum suam vidit Dionysiadi. Mea vero quo accumsan in deinde duas particularis dedit beneficio, communicatio mihi servitute coniunx efficerer nuptiarum civibus unde tu.</p>
<p>08. Dicentem Austri ventriculum defunctae cubiculo forma anima te princeps audito claudi in rei sensibilium iussit in rei finibus veteres hoc. Potentiam suos exteriores non ait in fuerat accidens quam dicentes multa dolores in fuerat se vero non ait. Num praebeo deum roseo commendavit fideliter harena in lucem. Spero mihi cum suam non dum veniens indica enim formam cum obiectum est cum magna. Nomen ibique parvulam eodem mulier quae vero non solutionem inveni. Laetare in fuerat accidens inquit merui litore, tharsos princeps age cum obiectum est in. Celebrantur nuptias iam est amet Cur meae in deinde cepit roseo commendavit fideliter harena in. Veniente mihi servitute coniunx efficerer nuptiarum cui Tharsia Theophilo ex hic ait est se in.</p>
<p>09. Labore in lucem exempli paupers coniunx caritate completae ad suis est se est cum unde. Antiochi suae adulescentis Stranguillio eam in modo, ac esse haec sed esse haec sed. Atqui plurium venenosamque serpentium ne civitatis civium eum. Auri Neptunus spatia tribulatione ad suis alteri ad quia quod eam ad te. X domum Taliarchus eius ad per dicis eo cardine populis ut casus. Africus hortamento laetus moritur ad te sed eu. Proiciens te in lucem concitaverunt in lucem. Male habitu rubor virginitatem sunt antecedente tuus factum ei sed esse deprecor! Tharsia adulescens longum terrae denegavit suis ut libertatem adhuc quid populi. Zurziaca in fuerat construeret in fuerat est in, accedens est se in lucem exempli paupers coniunx. Horreo Athenagora mihi servitute coniunx efficerer nuptiarum condono.</p>
<p>10. Male habitu introisti sit dolor Jesus Circumdat flante vestibus indulgentia perrexit est amet coram regis in. At at at ipsum ait regem Boreas quam cara in. Supponite facultatibus actum se in lucem genero quod non coepit. Agere videre Proicite a a patriam sum concumbens vero non potentiae amore nec 'pectore zaetam at eius. Sed esse ait regem adventu nihil impetrat est cum obiectum ait est se in. Bene ventis non solutionem ascendens sed. Meam ad per accipere sibi adsedit. Coniugem in lucem genero coruscus eum. Eam eos est Apollonius mihi quidditas patria navem aspectum cui, concursus male nuptiarum solum puella mihi esse deprecor Athenagora ut diem finito convocatis ad quia. Consuetudo aut ante leni in fuerat se ad te, rhenum ibat est amet amet coram regis iam. Bene nostrae iam insulam quod ait est se ad nomine, filiam vel ita in rei sensibilium iussit est amet Cur meae. Actum se ad nomine Stranguillio in lucem exitum vivit in rei exultant deo adoptavit cum.</p>
<p>11. Lorem ipsum dolor sit amet, materia amicis in. Nescimus de memor nostris qui dicens hoc, sui Care genitorem ipsam mecum est Apollonius. Apollonii corporis optime re est cum unde meae ceroma fronte comico hac navi quia. Filiae multi capillos quam crucis coniunx minus, 'Ipsius dum autem nobiscum paulo aureos fecit. Cupis ei primum subsannio oculos ut sua in fuerat eum in modo invenit! Civitate virginitatis tibi alloquitur hanc enim materiam. Tyrio alius ut casus adprehendens lugubri vestigia o inter. Filia navem auditum rationem superius dixisti 'membris data profectus ait in rei civibus laude clamaverunt donavit erat. Hellenico clamabat vidit loco dedit erat votum faciente humana gaudet uxoris tibi cum obiectum dixit hoc ait Cumque autem nobiscum. Ex hic nisi ductus vehor matrimonio accipiam. Facere potest ei primum subsannio oculos ne velocitate mare convivio.</p>
<p>12. Peracta licet tali hac insultare mortuorum meus. Allocutus ait est Apollonius ut libertatem non dum, videns sed esse ait Cumque hoc. Sic genero coruscus eum ego quod non solutionem invenisti naufragus habuisti sit Mariae maximas hanc legibus Antiochiam innocentem si. A his singulare tertio eam est cum autem illud cenam ita cum unde. Hanc si mihi quidditas iter patri. Nomen ibique parvulam eodem mulier autem illud meae ad quia ei. Boreas quam cara die ad nomine sed eu fugiens laudo in deinde plectrum anni ipsa quod non ait. Indulgentia pedes rex Dionysiadi suo aperuit. Antiochus sed dominum vidit Dionysiadi rex in fuerat construeret cena reges undis Tharsiam. X domum aversae regi accidens quam dicentes parem, navibus mensam ne velocitate renovasti dominus deprecatur videns mihi. Dabit es audito sed esse ait regem Boreas ingreditur ad per, tace mordeo tertia navigavit volente in fuerat eum in. Iterum naufragum manus in fuerat eum istam vero quo est se est cum. Possit scitis quas praesenti X domum aversae regi alius coagulato scelesta.</p>
<p>13. Mauricii materialia sola ait Cumque ego quod una, ex quae ait in fuerat construeret cena. Coram posset Denique laetare in lucem concitaverunt in fuerat. Notus ingreditur ipse dignitatem in lucem in lucem exempli paupers coniunx minus. Iuravi potest meum festinus pervenissem. Eiusdem ordo quos annorum nostros versi tuam, neptuno ait Cumque materia puella est cum! Accedens est amet consensit cellula filia in modo ad te, singulas cotidie hoc ambulare est cum unde non solutionem innocentem tantusque amorem civium takimata. Volentes mihi cum unde tu mihi quidditas tuo dolor ad per. Tyrio alius certe est se vero cum unde tu mihi Tyrum in lucem exitum atque album Apolloni codicellos iam. Probo artium liberalium perfectionis virgo permitte a civitas iter indica enim ad quia illum. Contremuit in deinde cepit roseo commendavit patris super. Venis potest contremiscunt pater ostendit Apollonius eius sed dominum in. Austri ventriculum defunctae cubiculo forma in deinde duas recitare. Scimus fundamentum in rei finibus veteres hoc ambulare dolor invenerit adduci aut ante Retrorsum redire ad per sanctus singulos domum.</p>
<p>14. Sic ut a his domino Lycoridem in deinde vero non potentiae quem es illum decidat quam crucis in. Communicatio mihi cum suam ut casus tui convenientibus ne videret quaeritur vero diam ille advenit ego Pentapolim Cyrenaeorum tertia! X domum Taliarchus disponis a a civitas Conservus mihi, abstulit meis caligine tempestas sabano praeclusoque sponte profundo. Christe in rei sensibilium iussit hoc, coniunx caritate completae ad nomine Hesterna. Domini includeret Tharsiam Hellenicus sui coniungens in modo. Itaque completum ad quia illum decidat quam dolore cruciatus in modo invenit ubi ait. Neptune reddens pater in modo cavendum es ego quod ait regem consolatus dum est amet Cur meae. Aliquid se ad suis ut sua confusus eos. Cyrenaeam plus quem es ego esse ait! Cives ego Pentapolim Cyrenaeorum tertia veni illis atque ut a a. Domus filia omnes deo adiuves finem volo, fit proponebat vidit Dionysiadi suo celaturos Tantus puella. Neptunalia festinare decenter ortam pectore villicus. Toro frumento manu certas parturiens a, christe in lucem in lucem.</p>
<p>15. Iacentem in lucem in modo invenit ubi diu desideriis meo, nisi se vero diam ' Apollonium sit aliquip ipsa mihi. Palpat venas tanquam vero quo sanctis venias in lucem exitum vivit. Palpat venas tanquam vero rex ut a, animae ait est se ad per te. Horreo Athenagora secundum ei primum gaudet uxoris tibi alloquitur vidit ad per. Pertulit sed dominum sit in lucem exempli paupers. Disce Apollonius non ait Cumque ego esse deprecor, sic genero nomine Maria cum magna amici rex. Inter tua vero quo sanctis venias in. Pater ostendit Apollonius in lucem genero nomine Stranguillio in fuerat construeret cena reges. Quod non coepit cenam veniebant est in modo invenit nutricis suo. Theophilo ex civibus corporis particularis mortem sunt amore excitat si mihi Tyrum in fuerat. Eam ad suis Tyrium coniugem in modo cavendum es sed haec.</p>
<p>16. Scelus euismod tollam impedit mecum loci haec, re est in modo cavendum es. Aderit omnia claustrum Bone de tuae infami cum. Quidditas tuo lugenti permittis enim ad nomine Hesterna studiis ascende ad te finis puellam materia ad per. Suam ad quia iuvenis naves. Nulla enim ad te in rei exultant deo adiuves finem, abiecto hac auxilium super audire servi Dianae non solutionem invenerunt. Amen ad suis Tyrium coniugem Chaldaeorum in modo genito in. Curro vicina haec sed quod tamen cursu agis cives perfusa commendavit patris Tyrius tu illum vero diam ille eum. Ascendi in modo invenit iuvenem discessum adulta quid ait in rei completo litus sua coniuge sancta justo forma in. Video qui enim materiam individuis qui dicens hoc Apollonius. Gaudeo in modo compungi mulierem volutpat. Autem est cum autem nobiscum laetitia haec sed eu fides se ad per animum est Apollonius mihi. Scola veniamus est in deinde plectrum anni ipsa Invitamus me. Toto determinata diebus paululum seclusit in rei civibus nescis haec.</p>
<p>17. Introivit dic gubernius eum est cum magna. Alia qui auri Neptunus spatia tribulatione ad suis ut sua. In fuerat est amet Cur meae in deinde plectrum anni ipsa quod non potentiae. Navis fortiter quam cara in rei civibus in deinde duas recitare. Horreo Athenagora mihi cum suam ut a. Dionysiadis eum filiam sum ad nomine sed dominum vidit pater. Volentes mihi cum suam vidit Dionysiadi. Mea vero quo accumsan in deinde duas particularis dedit beneficio, communicatio mihi servitute coniunx efficerer nuptiarum civibus unde tu.</p>
<p>18. Dicentem Austri ventriculum defunctae cubiculo forma anima te princeps audito claudi in rei sensibilium iussit in rei finibus veteres hoc. Potentiam suos exteriores non ait in fuerat accidens quam dicentes multa dolores in fuerat se vero non ait. Num praebeo deum roseo commendavit fideliter harena in lucem. Spero mihi cum suam non dum veniens indica enim formam cum obiectum est cum magna. Nomen ibique parvulam eodem mulier quae vero non solutionem inveni. Laetare in fuerat accidens inquit merui litore, tharsos princeps age cum obiectum est in. Celebrantur nuptias iam est amet Cur meae in deinde cepit roseo commendavit fideliter harena in. Veniente mihi servitute coniunx efficerer nuptiarum cui Tharsia Theophilo ex hic ait est se in.</p>
<p>19. Labore in lucem exempli paupers coniunx caritate completae ad suis est se est cum unde. Antiochi suae adulescentis Stranguillio eam in modo, ac esse haec sed esse haec sed. Atqui plurium venenosamque serpentium ne civitatis civium eum. Auri Neptunus spatia tribulatione ad suis alteri ad quia quod eam ad te. X domum Taliarchus eius ad per dicis eo cardine populis ut casus. Africus hortamento laetus moritur ad te sed eu. Proiciens te in lucem concitaverunt in lucem. Male habitu rubor virginitatem sunt antecedente tuus factum ei sed esse deprecor! Tharsia adulescens longum terrae denegavit suis ut libertatem adhuc quid populi. Zurziaca in fuerat construeret in fuerat est in, accedens est se in lucem exempli paupers coniunx. Horreo Athenagora mihi servitute coniunx efficerer nuptiarum condono.</p>
<p><a class="showContent" href="#">Expand / Contract Content</a></p>
<div class="collapsable">
<p>19a. Introivit dic gubernius eum est cum magna. Alia qui auri Neptunus spatia tribulatione ad suis ut sua. In fuerat est amet Cur meae in deinde plectrum anni ipsa quod non potentiae. Navis fortiter quam cara in rei civibus in deinde duas recitare. Horreo Athenagora mihi cum suam ut a. Dionysiadis eum filiam sum ad nomine sed dominum vidit pater. Volentes mihi cum suam vidit Dionysiadi. Mea vero quo accumsan in deinde duas particularis dedit beneficio, communicatio mihi servitute coniunx efficerer nuptiarum civibus unde tu.</p>
<p>19b. Dicentem Austri ventriculum defunctae cubiculo forma anima te princeps audito claudi in rei sensibilium iussit in rei finibus veteres hoc. Potentiam suos exteriores non ait in fuerat accidens quam dicentes multa dolores in fuerat se vero non ait. Num praebeo deum roseo commendavit fideliter harena in lucem. Spero mihi cum suam non dum veniens indica enim formam cum obiectum est cum magna. Nomen ibique parvulam eodem mulier quae vero non solutionem inveni. Laetare in fuerat accidens inquit merui litore, tharsos princeps age cum obiectum est in. Celebrantur nuptias iam est amet Cur meae in deinde cepit roseo commendavit fideliter harena in. Veniente mihi servitute coniunx efficerer nuptiarum cui Tharsia Theophilo ex hic ait est se in.</p>
</div>
<p>20. Male habitu introisti sit dolor Jesus Circumdat flante vestibus indulgentia perrexit est amet coram regis in. At at at ipsum ait regem Boreas quam cara in. Supponite facultatibus actum se in lucem genero quod non coepit. Agere videre Proicite a a patriam sum concumbens vero non potentiae amore nec 'pectore zaetam at eius. Sed esse ait regem adventu nihil impetrat est cum obiectum ait est se in. Bene ventis non solutionem ascendens sed. Meam ad per accipere sibi adsedit. Coniugem in lucem genero coruscus eum. Eam eos est Apollonius mihi quidditas patria navem aspectum cui, concursus male nuptiarum solum puella mihi esse deprecor Athenagora ut diem finito convocatis ad quia. Consuetudo aut ante leni in fuerat se ad te, rhenum ibat est amet amet coram regis iam. Bene nostrae iam insulam quod ait est se ad nomine, filiam vel ita in rei sensibilium iussit est amet Cur meae. Actum se ad nomine Stranguillio in lucem exitum vivit in rei exultant deo adoptavit cum.</p>
</div>
<div id="menu">
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
</ul>
</div>
<div id="footerContent">
<p>Lorem ipsum dolor sit amet, materia amicis in. Nescimus de memor nostris qui dicens hoc, sui Care genitorem ipsam mecum est Apollonius. Apollonii corporis optime re est cum unde meae ceroma fronte comico hac navi quia. Filiae multi capillos quam crucis coniunx minus, 'Ipsius dum autem nobiscum paulo aureos fecit. Cupis ei primum subsannio oculos ut sua in fuerat eum in modo invenit! Civitate virginitatis tibi alloquitur hanc enim materiam. Tyrio alius ut casus adprehendens lugubri vestigia o inter. Filia navem auditum rationem superius dixisti 'membris data profectus ait in rei civibus laude clamaverunt donavit erat. Hellenico clamabat vidit loco dedit erat votum faciente humana gaudet uxoris tibi cum obiectum dixit hoc ait Cumque autem nobiscum. Ex hic nisi ductus vehor matrimonio accipiam. Facere potest ei primum subsannio oculos ne velocitate mare convivio.</p>
<p>Lorem ipsum dolor sit amet, materia amicis in. Nescimus de memor nostris qui dicens hoc, sui Care genitorem ipsam mecum est Apollonius. Apollonii corporis optime re est cum unde meae ceroma fronte comico hac navi quia. Filiae multi capillos quam crucis coniunx minus, 'Ipsius dum autem nobiscum paulo aureos fecit. Cupis ei primum subsannio oculos ut sua in fuerat eum in modo invenit! Civitate virginitatis tibi alloquitur hanc enim materiam. Tyrio alius ut casus adprehendens lugubri vestigia o inter. Filia navem auditum rationem superius dixisti 'membris data profectus ait in rei civibus laude clamaverunt donavit erat. Hellenico clamabat vidit loco dedit erat votum faciente humana gaudet uxoris tibi cum obiectum dixit hoc ait Cumque autem nobiscum. Ex hic nisi ductus vehor matrimonio accipiam. Facere potest ei primum subsannio oculos ne velocitate mare convivio.</p>
<p>Lorem ipsum dolor sit amet, materia amicis in. Nescimus de memor nostris qui dicens hoc, sui Care genitorem ipsam mecum est Apollonius. Apollonii corporis optime re est cum unde meae ceroma fronte comico hac navi quia. Filiae multi capillos quam crucis coniunx minus, 'Ipsius dum autem nobiscum paulo aureos fecit. Cupis ei primum subsannio oculos ut sua in fuerat eum in modo invenit! Civitate virginitatis tibi alloquitur hanc enim materiam. Tyrio alius ut casus adprehendens lugubri vestigia o inter. Filia navem auditum rationem superius dixisti 'membris data profectus ait in rei civibus laude clamaverunt donavit erat. Hellenico clamabat vidit loco dedit erat votum faciente humana gaudet uxoris tibi cum obiectum dixit hoc ait Cumque autem nobiscum. Ex hic nisi ductus vehor matrimonio accipiam. Facere potest ei primum subsannio oculos ne velocitate mare convivio.</p>
</div>
</div>
jQuery
$(document).ready(function()
{
//Initialisation
var scrollPosition = 0;
//DOM ELEMENTS
var parentContainer = $("#contentContainer") //parent container of content & menu or sidebar
var nonFixedObject = $("#bodyContent"); //scrollable content
var fixedObject = $('#menu'); //fixed menu or sidebar
var contentOffsetTop = $(nonFixedObject).offset().top; // get content offset from top
var menuOffsetTop = $(fixedObject).offset().top; //get fixed content offset from top
var contentHeight = getContentHeight();
var menuHeight = getMenuHeight();
var offsetBottom = calculateOffSetBottom();
var containerWidth = $(parentContainer).width(); //get the width of the main container
var screenResizerTimer; //global timer for resizing event
$(window).scroll(function ()
{
scrollPosition = getScrollPosition();
if(scrollPosition > contentOffsetTop)
{
$(fixedObject).attr('style','');
$(fixedObject).addClass('fixToTop');
if(scrollPosition > offsetBottom)
{
$(fixedObject).css({'position':'absolute', 'top':offsetBottom});
}
}
else
{
if ( $(fixedObject).hasClass('fixToSide') )
{
$(fixedObject).css({'top':menuOffsetTop - scrollPosition});
}
if ( $(fixedObject).hasClass('fixToTop') )
{
$(fixedObject).removeClass('fixToTop');
}
}
});
//When we resize the window smaller than the container, attach the class to stick the menu to the browser window
//instead of the parent container
$(window).resize(function()
{
clearTimeout(screenResizerTimer);
screenResizerTimer = setTimeout(function()
{
var bodyWidth = $('body').width(); //get the body width
if (bodyWidth <= containerWidth) //if browser window is smaller than content width
{
$(fixedObject).addClass('fixToSide') //then add the class
}
else
{
$(fixedObject).removeClass('fixToSide') //then remove the class
}
},10);
});
$('.showContent').toggle(function(e)
{
e.preventDefault();
$(this).parent().next().slideDown(
function()
{
getContentHeight();
calculateOffSetBottom()
});
}, function(e)
{
e.preventDefault();
$(this).parent().next().slideUp(
function()
{
getContentHeight();
calculateOffSetBottom()
});
})
//-----------------------------------
// FUNCTIONS
//-----------------------------------
function getContentHeight()
{
contentHeight = $(nonFixedObject).height(); //get content height
return contentHeight;
}
function getMenuHeight()
{
menuHeight = $(fixedObject).height(); //get fixed content height
return menuHeight;
}
function calculateOffSetBottom()
{
offsetBottom = contentHeight - (menuHeight - menuOffsetTop); //bottom point at which fixed content moves again
return offsetBottom;
}
function getScrollPosition()
{
scrollPosition = $(window).scrollTop()
return scrollPosition
}
});
$（文档）.ready（函数（）
{
//初始化
变量位置=0；
//DOM元素
var parentContainer=$（“#contentContainer”）//内容和菜单或边栏的父容器
var nonFixedObject=$（“#bodyContent”）；//可滚动内容
var fixedObject=$（'#menu'）；//修复了菜单或边栏
var contentOffsetTop=$（非固定对象）.offset（）.top；//从顶部获取内容偏移量
var menuOffsetTop=$（fixedObject.offset（）.top；//从顶部获取固定内容偏移量
var contentHeight=getContentHeight（）；
var menuHeight=getMenuHeight（）；
var offsetBottom=calculateOffSetBottom（）；
var containerWidth=$（parentContainer）.width（）；//获取主容器的宽度
var screenResizerTimer；//调整事件大小的全局计时器
$（窗口）。滚动（函数（）
{
scrollPosition=getScrollPosition（）；
如果（滚动位置>内容偏移设置）
{
$（fixedObject.attr（'style'，''）；
$（fixedObject）.addClass（'fixToTop'）；
如果（滚动位置>偏移底部）
{
$（fixedObject）.css（{'position'：'absolute'，'top'：offsetBottom}）；
}
}
其他的
{
if（$（fixedObject）.hasClass（'fixToSide'））
{
$（fixedObject）.css（{'top'：menuOffsetTop-scrollPosition}）；
}
if（$（fixedObject）.hasClass（'fixToTop'））
{
$（fixedObject）.removeClass（'fixToTop'）；
}
}
});
//当我们调整窗口的大小小于容器时，附加类以将菜单粘贴到浏览器窗口
//而不是父容器
$（窗口）。调整大小（函数（）
{
clearTimeout（screenResizerTimer）；
screenResizerTimer=setTimeout（函数（）
{
var bodyWidth=$（'body'）.width（）；//获取正文宽度
如果（bodyWidth）您可能已经尝试过了，但是您可以console.log
您的变量并滚动查看为什么计算会提前触发吗？@green谢谢。我刚刚尝试了console.log
上的位置，内容_top
，和检查这是输出：对象{top:194 left:0}自定义js.js？ver=1.0.0:108 194自定义js.js？ver=1.0.0:109 1471
。但是，我不确定这如何帮助我理解为什么计算会提前触发。谢谢，凯尔。我知道你做的和原始帖子中的gif一样，但是有可能在我的测试站点上复制更多我的设置吗？例如，我的标题
html, body {font:0.9em/1.1em "Arial", sans-serif;}
h1 {line-height:1.2em}
p#scrollValue {position:fixed; top:0; left:0;}
p#docHeight {position:fixed; top:20px; left:0;}
#contentContainer {margin:30px auto 0; width:600px; overflow:hidden; border:3px solid lime;}
#headerContent {margin:0 0 30px; border:3px solid cyan;}
#bodyContent {float:left; margin:0 0 30px; width:400px; border:3px solid blue}
.collapsable {display:none}
#menu {float:right; width:100px; border:3px solid red; background:white;}
#footerContent {clear:both; border:3px solid cyan;}
.fixToTop {position:fixed; top:0px; right:50%; margin-right:-300px}
.fixToSide {position:fixed; right:0; margin-right:0;}
$(document).ready(function()
{
//Initialisation
var scrollPosition = 0;
//DOM ELEMENTS
var parentContainer = $("#contentContainer") //parent container of content & menu or sidebar
var nonFixedObject = $("#bodyContent"); //scrollable content
var fixedObject = $('#menu'); //fixed menu or sidebar
var contentOffsetTop = $(nonFixedObject).offset().top; // get content offset from top
var menuOffsetTop = $(fixedObject).offset().top; //get fixed content offset from top
var contentHeight = getContentHeight();
var menuHeight = getMenuHeight();
var offsetBottom = calculateOffSetBottom();
var containerWidth = $(parentContainer).width(); //get the width of the main container
var screenResizerTimer; //global timer for resizing event
$(window).scroll(function ()
{
scrollPosition = getScrollPosition();
if(scrollPosition > contentOffsetTop)
{
$(fixedObject).attr('style','');
$(fixedObject).addClass('fixToTop');
if(scrollPosition > offsetBottom)
{
$(fixedObject).css({'position':'absolute', 'top':offsetBottom});
}
}
else
{
if ( $(fixedObject).hasClass('fixToSide') )
{
$(fixedObject).css({'top':menuOffsetTop - scrollPosition});
}
if ( $(fixedObject).hasClass('fixToTop') )
{
$(fixedObject).removeClass('fixToTop');
}
}
});
//When we resize the window smaller than the container, attach the class to stick the menu to the browser window
//instead of the parent container
$(window).resize(function()
{
clearTimeout(screenResizerTimer);
screenResizerTimer = setTimeout(function()
{
var bodyWidth = $('body').width(); //get the body width
if (bodyWidth <= containerWidth) //if browser window is smaller than content width
{
$(fixedObject).addClass('fixToSide') //then add the class
}
else
{
$(fixedObject).removeClass('fixToSide') //then remove the class
}
},10);
});
$('.showContent').toggle(function(e)
{
e.preventDefault();
$(this).parent().next().slideDown(
function()
{
getContentHeight();
calculateOffSetBottom()
});
}, function(e)
{
e.preventDefault();
$(this).parent().next().slideUp(
function()
{
getContentHeight();
calculateOffSetBottom()
});
})
//-----------------------------------
// FUNCTIONS
//-----------------------------------
function getContentHeight()
{
contentHeight = $(nonFixedObject).height(); //get content height
return contentHeight;
}
function getMenuHeight()
{
menuHeight = $(fixedObject).height(); //get fixed content height
return menuHeight;
}
function calculateOffSetBottom()
{
offsetBottom = contentHeight - (menuHeight - menuOffsetTop); //bottom point at which fixed content moves again
return offsetBottom;
}
function getScrollPosition()
{
scrollPosition = $(window).scrollTop()
return scrollPosition
}
});