我有两个jQuery项目，它们在本地测试时运行良好，但是一旦移到服务器，就会遇到2个特定于浏览器的问题。如果有帮助，我可以将其分为两个独立的问题。
第一个问题是jScrollPane插件，该插件用于在Firefox中的几个“ overflow：scroll” div上设置滚动条的样式。令人讨厌的是，该解决方案对于IE和Chrome绝对适用，但对Firefox而言却不行。同样，在本地测试时，它应能正常工作（包括在Firefox中），但是当移至服务器时，功能将中断。 jScrollPane“插件”正在触发-它为每个Firebug添加了jspContainer，jspScrollable和jspPane，但并未在Firefox中添加滚动功能。在屏幕上，它显示为overflow：hidden div。
第二个问题是，基于剖面元素到达视口顶部的情况，将导航栏类别的固定位置更改为.current。我的解决方案在Firefox和Chrome中效果很好，但在IE中却没有切换。
编辑-此脚本无法在本地或IE中的服务器上工作。它在Chrome / FF中完美运行
未完成的工作模型可以在www.4SDesignStudio.com/new-projects/bwh/index.html上找到
我在本地托管jQuery 1.11版。
滚动条问题HTML：
<div class="scroll-pane">
<div id="main-tasting-menu">
<div class="centered">
<h2 style="margin:0; padding:0; ">Big Reds and Tasty Whites Menu</h2>
<p style="margin:0; padding:0;">For our sweeter and champagne-esque releases, please click the "Bubbles & Dessert Menu" to the right</p>
<br/>
</div>
<a href="#"><img src="images/labels/bwh-2010-viognier.jpg" alt="Big White House 2012 Viognier"/></a>
<h3><a href="#">2012 Viognier | Big White House</a></h3>
<h4><a href="#">Ripken Vineyard, Lodi - Single Vineyard Viognier</a></h4>
<p>Our 2012 Viognier benefitted from a mild ripening season rewarding us with aromas of ripe melon and orange zest. Cold fermentation and extended barrel aging then yield
beeswax and honey in the nose. The extended barrel aging also gives us an extra-creamy mouthfeel to balance the crisp finish.</p>
<a href="#"><img src="images/labels/bwh-2009-lapsus.jpg" alt="XXXXX"/></a>
<h3><a href="#">2012 Lapsus | Big White House</a></h3>
<h4><a href="#">California Blend - 50% Viognier, 38% Roussanne, 12% Marsanne</a></h4>
<p>Our 2012 Viognier benefitted from a mild ripening season rewarding us with aromas of ripe melon and orange zest. Cold fermentation and extended barrel aging then yield
beeswax and honey in the nose. The extended barrel aging also gives us an extra-creamy mouthfeel to balance the crisp finish.</p>
<a href="#"><img src="images/labels/bwh-2012-pinot-noir.jpg" alt="XXXXX"/></a>
<h3><a href="#">2012 Pinot Noir | Big White House</a></h3>
<h4><a href="#">Ripken Vineyard, Lodi - Single Vineyard Pinot Noir</a></h4>
<p>We loved this Pinot as a baby, and love it still, but as a teenager, it's ready to bound out into the world - Light, sparkly, fresh and not looking back. We like its forward
leaning confidence and light-hearted humor. As its parents, we are concerned about the short skirt and skimpy top. It is the youngest child that we've ever allowed to leave home.
You can't keep them down on the farm after the've seen Paris.</p>
<a href="#"><img src="images/labels/bwh-2010-east-west-syrah.jpg" alt="XXXXX"/></a>
<h3><a href="#">2012 East-West Syrah | Big White House</a></h3>
<h4><a href="#">Livermore Valley Blend - 100% Syrah, 2 Vineyards</a></h4>
<p>This 2010 Syrah we call East-West Syrah because it marries Syrah from a hilly, Eastern Livermore Valley vineyard with a rocky stream-bed of a vineyard from the west side. The
mouth has a nice big syrah mouth feel, moderated by a little bit of butteriness in the mid-palate and finally, finishing with a taste of juicy blackberry.</p>
<a href="#"><img src="images/labels/bwh-2011-alfies-amalgamation.jpg" alt="XXXXX"/></a>
<h3><a href="#"><u>*Barrel Sample:</u> 2011 Alfie's Amalgamation | Big White House</a></h3>
<h4><a href="#">Livermore Valley Blend - 40% Petite Sirah, 40% Zinfandel, 20% Cab</a></h4>
<p>Great mouth-feel, blackberry, cherry and alspice in the nose is followed by big mouth-feel and a juicy finish in the mouth.<br><br></p>
<a href="#"><img src="images/labels/bwh-2009-zinfandel.jpg" alt="XXXXX"/></a>
<h3><a href="#"><u>*Barrel Sample:</u> 2012 Zinfandel | Big White House</a></h3>
<h4><a href="#">Sblendorio Vineyard, Livermore Valley - Single Vineyard Zinfandel</a></h4>
<p>Lighter and brighter than the 2011, the 2012 still maintains the style of a food-friendly Zin. Cranberry and strawberry with hints of white pepper in the nose is followed by medium body
and long finish in the mouth</p>
<a href="#"><img src="images/labels/bwh-2011-chateau-marion.jpg" alt="XXXXX"/></a>
<h3><a href="#">2011 Chateau Marion Bordeaux | Big White House</a></h3>
<h4><a href="#">Livermore Valley Blend - 50% Cabernet Sauvignon, 50% Merlot</a></h4>
<p>Bordeaux blend of eastern Livermore Cabernet and Merlot. In our 2011 Chateau Marion, find mid-palate structure and spice from the Merlot and cherry, with a long juicy finish from the Cab.</p>
<br/>
<a href="#"><img src="images/labels/je-2011-amoureux.jpg" alt="XXXXX"/></a>
<h3><a href="#">2011 La Famille Des Amoureux | John Evan Cellars</a></h3>
<h4><a href="#">Livermore Valley Blend - 80% Cab, 20% Petite Sirah</a></h4>
<p>The fourth in the Lovers Series, this Les Am continues the tradition of matching a masculine cab with it's feminine couterpart to achieve balance and structure. The Lovers Series tracks John Evan's
and his wife Christina's relationship. The newest milestone is a baby boy, born April 2nd. A little bit of Petitie Sirah represents the new addition. Like the little man himself, Petite Sirah
gives a big impact in a little package.</p>
<br/>
<br/>
</div>
<div id="dessert-tasting-menu">
<div class="centered">
<h2 style="margin:0; padding:0; ">Dessert and Bubbles Menu</h2>
<p style="margin:0; padding:0;">For our red and white releases, please click the "Big Reds & Tasty Whites Menu" to the right</p>
<br/>
</div>
<a href="#"><img src="images/labels/bwh-2007-liquid-amber.jpg" alt="Big White House 2012 Viognier"/></a>
<h3><a href="#">Grand Cuvee | Big White House</a></h3>
<h4>Sparkling Wine</h4>
<p>This delightfully dry, sparkling wine was bottled specifically for our Big White House Sparkling Cellars Label. We like the tiny bubbles, creamy mouth feel and crisp, dry
finish. Equivalent in dryness to a French "Brut", this is a terrific sparkler for celebrating any occasion. Try this in a "kit" mixed with the Sherry (two parts Cuvee, one part
Late Harvest Viognier).</p>
<p style="color:orange">NEED CORRECT LABEL IMAGES</p><!-- Need correct labels -->
<a href="#"><img src="images/labels/bwh-2007-liquid-amber.jpg" alt="XXXXX"/></a>
<h3><a href="#">Peche Mignon | Big White House</a></h3>
<h4><a href="#">Peach Sparkling Wine</a></h4>
<p>You've all loved our dry sparkling wine and now John Marion made a special release for his grandmother Eva. Our sparkling wine is kissed with peach and is sure to become a
favorite of everyone. Still plenty of tiny bubbles with a creamy mouth feel and crisp dry finish. Try this in a "kit" mix with Ma Cherie.</p>
<p style="color:orange">NEED CORRECT LABEL IMAGES</p><!-- Need correct labels -->
<a href="#"><img src="images/labels/bwh-2007-liquid-amber.jpg" alt="XXXXX"/></a>
<h3><a href="#">Ma Cherie | Big White House</a></h3>
<h4><a href="#">Sherry-Style, Late Harvest Viognier</a></h4>
<p>Sherry is often described as the most under-rated of traditional wines. Our aging regime follows the traditional approach, using not-quite-full barrels. The flor controls the
oxidation and allows for the formation of a variety of aromas including Turbinado sugar, dried apricot, caramel, orange blossom and toasted almonds.</p>
<p style="color:orange">NEED CORRECT LABEL IMAGES</p><!-- Need correct labels -->
</div>
</div>
</div>
CSS：
.tasting-menu {
margin-top: 0;
padding-top:1em;
padding-left:.25em;
height: 24.5em;
line-height:1em;
background:rgba(00,00,00,.5);
border-radius:8px;
overflow: hidden;
}
.tasting-menu h3{
color:rgba(224, 145, 50, 1);
margin-bottom:0;
font-size:1.1em;
}
.tasting-menu h4{
font-size:.9em;
font-weight:400;
}
.tasting-menu p {
font-size:.75em;
font-weight:300;
margin:auto 1em .5em 16%;
}
.tasting-menu img {
width:12.5%;
height:auto;
float:left;
margin-right:1.5em;
}
/* Creates toggled hidden and visible menus using Javascript for Main Menu and Desert/Bubbles Menu */
.button-switches input {
width:85%;
border-radius:3px;
background: rgba(224, 145, 50, 1);
}
.button-switches input:hover {
cursor:pointer;
background: rgba(00,00,00, .5)
}
#main-tasting-menu {
display:block;
}
#dessert-tasting-menu {
display:none;
}
/* jQuery Scrollbar fix for Firefox browser */
.scroll-pane {
position:relative;
height:24.5em;
overflow: scroll;
padding-bottom:1.5em
}
JS：
<script>
$(document).ready(function(){
// Cached variables to avoid multiple jQuery calls
var $mainLinks = $('.main-links');
var $headerLogo = $('.header-logo');
var $mainTastingMenu = $('#main-tasting-menu');
var $dessertTastingMenu = $('#dessert-tasting-menu');
var $menuSwitch_1 = $('#menu-switch1');
var $menuSwitch_2 = $('#menu-switch2');
// Plugins
$('.lightbox').nivoLightbox();
$('.scroll-pane').jScrollPane();
$('.scroll-pane2').jScrollPane();
// Event handlers
$menuSwitch_1.on('click', function(event) {
$mainTastingMenu.toggle('show');
$dessertTastingMenu.toggle('hide');
});
$menuSwitch_2.on('click', function(event) {
$mainTastingMenu.toggle('hide');
$dessertTastingMenu.toggle('show');
});
$(window).on('scroll', function(event) {
if ($(this).scrollTop() > 200) {
$mainLinks.fadeIn();
$headerLogo.fadeIn();
} else {
$mainLinks.hide();
$headerLogo.hide();
}
var top = $(this).scrollTop(),
idx = $('section.marker').sort(function (a, b) {
return top - $(b).offset().top;
}).first().index('section.marker'),
el = $('.main-links li a').eq(idx);
if (!el.hasClass('current')) {
$('.main-links li a').removeClass('current');
el.addClass('current');
}
});
});</script>
最佳答案
Bootstrap滚动间谍将解决导航栏问题，其中链接为“ #link”以指向“ id =“ link””。
当id对象移到顶部时，菜单活动类将更改为匹配。
查看以下示例：http://jsfiddle.net/6q3LpjL7/
<!-- add class to body tag:-->
<body class="scroll-area" data-spy="scroll" data-target="#myNavbar" data-offset="60">
<!-- Example of href in navbar -->
<li><a href="#section-2">Section 2</a></li>
<!-- ID attribute to match href in navbar --L
<h3 id="section-2">Section 2</h3>
<!-- jQuery to scroll page using scrollTop and scrollSpy -->
$(function(){
$('a[href*=#]:not([href=#])').click(function(){
var pathName = location.pathname;
var thisPathName = this.pathname;
var locHost = location.hostname;
var thisHost = this.hostname;
if( pathName == thisPathName && locHost == thisHost ){
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if(target.length){
$('html,body').animate( { scrollTop: $( target ).offset().top - 65 }, 1250 );
}
}
});
});
关于jquery - jQuery脚本在本地工作-转移到服务器时中断？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25853757/