0
我想在對話框中滾動時在.ui-dialog-titlebar上添加框陰影。像這樣的東西：
這裏是我的代碼：如何在jQuery對話框中滾動時添加框陰影
$(function(){
\t \t \t $("#dlg-vop").dialog({
\t \t \t autoOpen: false,
\t \t \t modal: true,
\t \t \t draggable: false,
\t \t \t width: 480,
\t \t \t maxHeight: 480,
\t \t \t closeText: "",
\t \t \t buttons: true,
\t \t \t dialogClass: "vop-dialog",
\t \t \t open: function() {
\t \t \t $("html").addClass("dialog-open");
\t \t \t $("#dlg-vop").scrollTop(0);
\t \t \t },
\t \t \t close: function() {
\t \t \t $("html").removeClass("dialog-open")
\t \t \t },
\t \t \t create: function(event, ui) {
\t \t \t var header = $('.ui-dialog-titlebar');
\t \t \t $(window).scroll(function(){
\t \t \t if($(window).scrollTop() <= 30){
\t \t \t header.css('box-shadow', '0px 0px ' + $(window).scrollTop() + 'px rgba(0, 0, 0, 0.4)');
\t \t \t } else {
\t \t \t header.css('box-shadow', '0px 0px 30px rgba(0, 0, 0, 0.4)');
\t \t \t }
\t \t \t });
\t \t \t }
\t \t \t });
\t \t \t $("#vop-opener").on("click", function() {
\t \t \t $("#dlg-vop").dialog("open");
\t \t \t return false;
\t \t \t });
\t \t \t });<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
\t \t \t html.popup-open, html.popup-open body{overflow: hidden; height: auto; min-height: inherit;}
\t \t \t a{color:#000;}
\t \t \t .ui-widget-overlay{background-color: rgba(0,0,0,.5); opacity: 1;}
.ui-widget.ui-widget-content{border:0; padding:0;}
\t \t \t .ui-widget-header{border:0; background: 0 none; border-radius: 0;}
\t \t </style>
<a href="#" id="vop-opener">Open dialog</a>
\t \t
\t \t <div id="dlg-vop" class="vop" title="Test">
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus viverra elit, in efficitur nunc faucibus sit amet. Proin consequat efficitur nulla. Aenean ultricies a est vulputate vehicula. Aliquam et nulla finibus, varius diam vitae, posuere velit. Nulla pretium mi ut felis convallis malesuada.</p>
\t \t \t <p>Maecenas vitae libero tincidunt, faucibus justo a, laoreet dui. Quisque at enim ut nisl pellentesque cursus id nec odio. Sed imperdiet elit id lacus congue auctor. Sed sed tincidunt nibh. Mauris blandit sollicitudin lobortis. Duis ac bibendum ante. Phasellus faucibus ipsum nec felis ornare, eget rhoncus diam sodales. Praesent venenatis lobortis elit ac elementum. Ut laoreet euismod augue, id tincidunt odio vulputate vel.</p>
\t \t \t <p>Nam vitae mi ornare, imperdiet nulla commodo, suscipit lacus. Sed faucibus lacus non magna sodales, id vulputate ex rhoncus. Sed consequat augue ut ullamcorper molestie. Nam sed malesuada nisi. Sed libero lectus, volutpat ut nulla eget, consequat aliquam leo. Ut hendrerit scelerisque tellus varius elementum. Sed massa lectus, mollis nec mauris ut, mollis commodo odio.</p>
\t \t \t <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin faucibus viverra elit, in efficitur nunc faucibus sit amet. Proin consequat efficitur nulla. Aenean ultricies a est vulputate vehicula. Aliquam et nulla finibus, varius diam vitae, posuere velit. Nulla pretium mi ut felis convallis malesuada.</p>
\t \t \t <p>Maecenas vitae libero tincidunt, faucibus justo a, laoreet dui. Quisque at enim ut nisl pellentesque cursus id nec odio. Sed imperdiet elit id lacus congue auctor. Sed sed tincidunt nibh. Mauris blandit sollicitudin lobortis. Duis ac bibendum ante. Phasellus faucibus ipsum nec felis ornare, eget rhoncus diam sodales. Praesent venenatis lobortis elit ac elementum. Ut laoreet euismod augue, id tincidunt odio vulputate vel.</p>
\t \t \t <p>Nam vitae mi ornare, imperdiet nulla commodo, suscipit lacus. Sed faucibus lacus non magna sodales, id vulputate ex rhoncus. Sed consequat augue ut ullamcorper molestie. Nam sed malesuada nisi. Sed libero lectus, volutpat ut nulla eget, consequat aliquam leo. Ut hendrerit scelerisque tellus varius elementum. Sed massa lectus, mollis nec mauris ut, mollis commodo odio.</p>
\t \t </div>我的事情，問題是：
$(window).scroll(function(){
if($(window).scrollTop() <= 30){
header.css('box-shadow', '0px 0px ' + $(window).scrollTop() + 'px rgba(0, 0, 0, 0.4)');
} else {
header.css('box-shadow', '0px 0px 30px rgba(0, 0, 0, 0.4)');
}
});
當我使用它在其他元素，而不是對話框它的工作原理。不幸的是，我不知道如何修改它。我希望有人能幫助我:)
它的工作原理，感謝了很多 – pzoli
大，你可能標誌着這個答案，然後接受？ –