我想主动/突出显示＆＃34;关于＆＃34;但当我向下滚动一些空间时，它变得活跃/突出显示。它应该突出显示＆＃34;关于＆＃34;当我在浏览器中打开它。我想主动/突出显示＆＃34;关于＆＃34;当我不移动滚动条。 ＆＃34;关于＆＃34;应该突出显示。帮我解决这个问题。 ＆＃34;关于＆＃34;应该突出显示。
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Close dialog my marea")
Dialog {
id: dialog
title: "Title"
width: parent.width/2
modal: false
closePolicy: Popup.CloseOnReleaseOutsideParent // something I never use
standardButtons: Dialog.Yes | Dialog.No
onAccepted: console.log("Yes clicked")
onRejected: console.log("No clicked")
onClosed: console.log("Dialog closed")
Component.onCompleted: open()
}
MouseArea{
anchors.fill: parent
onClicked: {
dialog.close()
}
}
}
答案 0 :(得分：0)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Black+Han+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gugi" rel="stylesheet">
<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed:400,900" rel="stylesheet">
<style>
body {
position: relative;
}
ul.nav-pills {
top: 100px;
position: fixed;
}
div.col-sm-9 div {
height: 250px;
font-size: 28px;
}
.bg-1 {
background-color: black;
}
.bg-1 ul li {
color: #ecf0f1;
font-family: 'Gugi', cursive;
font-size: 15px;
}
.bg-2 {
width: 86%;
background-color: #d1d8e0;
}
.col-sm-3 {
width: 14% !important;
background-color: white !important;
}
@media screen and (max-width: 810px) {
#about,
#education,
#certifications,
#skills,
#projects,
#experience,
#interest {
margin-left: 150px;
}
}
#myScrollspy {
position: fixed;
align-self: center;
left: 0;
top: 0;
}
#hello {
font-family: 'Black Han Sans', sans-serif;
font-size: 65px;
margin-left: 150px;
margin-top: 200px;
}
#name {
font-family: 'Montserrat', sans-serif;
font-size: 55px;
font-weight: 600;
margin-left: 150px;
margin-top: 30px;
}
#self {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 500;
margin-left: 150px;
margin-top: 30px;
}
#engineer {
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 500;
margin-left: 150px;
margin-top: 30px;
}
#intro {
font-family: 'Lora', serif;
font-size: 20px;
color: #d1d8e0;
margin-left: 150px;
margin-top: 15px;
}
hr {
width: 400px;
border-top: 1px solid #4b6584;
border-bottom: 1px solid #4b6584;
}
#education {
margin-top: 0px;
}
#email {
font-size: 10px;
}
#headings {
font-family: 'Saira Extra Condensed', sans-serif;
color: #343a40;
font-weight: 700;
font-size: 50px;
}
#social {
margin-top: -90px;
margin-left: 250px;
}
.image {
margin-left: 20px;
padding: 1px;
}
.subheadings {
font-family: 'Saira Extra Condensed', sans-serif;
color: #20bf6b;
font-weight: 500;
font-size: 40px;
}
#certifications {
margin-top: 350px;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
color: #fff;
/* background-color: #337ab7; */
background-color: unset !important;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
<div class="container-fluid">
<div class="row bg-1">
<!-- Left Side Navigation Bar -->
<div class="col-sm-3 text-center" id="backg">
<nav id="myScrollspy">
<ul class="nav nav-pills nav-stacked ">
<img class="img-rounded img-responsive center-block image" src="naqqash.png" height="150" width="150 ">
<li class="active"><a href="#about">ABOUT</a></li>
<li><a href="#education">EDUCATION</a></li>
<li><a href="#certifications">CERTIFICATIONS</a></li>
<li><a href="#skills">SKILLS</a></li>
<li><a href="#projects">PROJECTS</a></li>
<li><a href="#experience">EXPERIENCE</a></li>
<li><a href="#interest">INTEREST</a></li>
</ul>
</nav>
</div>
<!-- Right Side -->
<div class="col-sm-9 bg-2">
<!-- About -->
<div id="about" class="section_div">
<h1 id="hello">hello</h1>
<h3 id="name">I'm Muhammad Naqqash,</h3>
<h3 id="self">a self taught developer.</h3>
<h3 id="engineer">I'm a Computer Engineer. </h3>
<p id="intro">I'm a positive and friendly person. Also, I love to set goals and achieve them.<br> My important qualities: self-motivated, ability overcome difficulties and the <br> ability to learn.</p>
<div id="social">
<a href=""><i class="fab fa-facebook fa-lg"></i><span style="display:inline-block; width: 5px;"></span>
<a href=""><i class="fab fa-linkedin fa-lg"></i></a> <span style="display:inline-block; width: 0px;"></span>
<a href=""><i class="fab fa-twitter-square fa-lg"></i></a><span style="display:inline-block; width: 5px;"></span>
<a href=""><i class="fab fa-github-square fa-lg"></i></a><span style="display:inline-block; width: 5px;"></span>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<br>
<br>
<br>
<!-- education -->
<div id="education" class="section_div">
<br>
<br>
<br>
<br>
<br>
<h1 id="headings">EDUCATION</h1>
<h3 class="subheadings"><i class="fas fa-graduation-cap fa-sm"></i><span style="display:inline-block; width: 20px;"></span>BS Computer Engineering</h3>
<h3 class="subheadings"><i class="fas fa-university"></i><span style="display:inline-block; width: 20px;"></span>NUST College of E&ME</h3>
</div>
<div id="certifications" class="section_div">
<h1 id="headings">Section 3</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="skills" class="section_div">
<h1 id="headings">Section 4</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="projects" class="section_div">
<h1 id="headings">Section 5</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="experience" class="section_div">
<h1 id="headings">Section 6</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div id="interest" class="section_div">
<h1 id="headings">Section 7</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
<div>
<h1>Section 7</h1>
<p>Try to scroll this section and look at the navigation list while scrolling!</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
//$( "#myScrollspy li" ).last().removeClass("active");
//$( "#myScrollspy li" ).first().addClass("active");
var navChildren = $("#myScrollspy li").children();
var aArray = [];
for (var i = 0; i < navChildren.length; i++) {
var aChild = navChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
}
$(window).scroll(function() {
var windowPos = $(window).scrollTop();
var windowHeight = $(window).height();
var docHeight = $(document).height();
for (var i = 0; i < aArray.length; i++) {
var theID = aArray[i];
var secPosition = $(theID).offset().top;
secPosition = secPosition - 135;
var divHeight = $(theID).height();
divHeight = divHeight + 90;
if (windowPos >= secPosition && windowPos < (secPosition + divHeight)) {
$("a[href='" + theID + "']").parent().addClass("active");
} else {
$("a[href='" + theID + "']").parent().removeClass("active");
}
}
});
});
})(jQuery);
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function() {
//$( "#myScrollspy li" ).last().removeClass("active");
//$( "#myScrollspy li" ).first().addClass("active");
var navChildren = $("#myScrollspy li").children();
var aArray = [];
for (var i = 0; i < navChildren.length; i++) {
var aChild = navChildren[i];
var ahref = $(aChild).attr('href');
aArray.push(ahref);
}
$(window).scroll(function() {
var windowPos = $(window).scrollTop();
var windowHeight = $(window).height();
var docHeight = $(document).height();
for (var i = 0; i < aArray.length; i++) {
var theID = aArray[i];
var secPosition = $(theID).offset().top;
secPosition = secPosition - 135;
var divHeight = $(theID).height();
divHeight = divHeight + 90;
if (windowPos >= secPosition && windowPos < (secPosition + divHeight)) {
$("a[href='" + theID + "']").parent().addClass("active");
} else {
$("a[href='" + theID + "']").parent().removeClass("active");
}
}
});
});
})(jQuery);
</script>