当用户导航到特定部分时执行功能(地理定位)
Execute function (geolocation) when user navigates to a specific part
我将这个免费模板用于我正在构建的网站:http://blackrockdigital.github.io/startbootstrap-scrolling-nav/
我正在使用地理定位服务 (google)。但我不想强迫用户每次进入网站时都按 "Approve",只有当用户导航 to/push "Service" button/area 时,我才需要我的地理位置函数来执行。有人知道如何解决这个问题吗?
我可以通过某种方式查看它们在网站上的位置吗?我可以获得部分 ID,但我如何根据用户当前所在的位置检查它?
部分示例:
<!-- About Section -->
<section id="About" class="About-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About</h1>
<h3>Here is text about us</h3>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="Services-pdl" class="Services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Services</h1>
<div id="map"></div>
</div>
</div>
</div>
</section>
谢谢。
如果您正在使用 jQuery(您的页面上可能已经有 - bootstrap),您可以将代码包装在 document.ready() 函数中,如下所示:
$(document).ready(function() {
// Code to execute
});
在页面加载完成后 运行。 https://learn.jquery.com/using-jquery-core/document-ready/
使用 jQuery,您还可以 运行 按钮点击代码,如下所示:
$('#mybutton').on('click', function() {
//Code to execute
});
在此处查看 on() 的文档 http://api.jquery.com/on/
通过将此用于滚动和单击(单击按钮时页面滚动到一个部分)解决了这个问题:
$(window).scroll(function() {
if(isScrolledIntoView($(find)))
{
setTimeout(function() {
initMap();
}, 900);
}
});
function isScrolledIntoView(elem)
{
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
.scroll() 中的 setTimeout 是必需的,因为当用户单击另一个按钮(位于本节下方)时,它将在没有 setTimeout 的情况下执行。不确定 setTimeout 是否可以低于 900,但目前可以正常工作。
从这个线程的答案中得到 isScrolledIntoView():Check if element is visible after scrolling
我将这个免费模板用于我正在构建的网站:http://blackrockdigital.github.io/startbootstrap-scrolling-nav/
我正在使用地理定位服务 (google)。但我不想强迫用户每次进入网站时都按 "Approve",只有当用户导航 to/push "Service" button/area 时,我才需要我的地理位置函数来执行。有人知道如何解决这个问题吗?
我可以通过某种方式查看它们在网站上的位置吗?我可以获得部分 ID,但我如何根据用户当前所在的位置检查它?
部分示例:
<!-- About Section -->
<section id="About" class="About-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>About</h1>
<h3>Here is text about us</h3>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="Services-pdl" class="Services-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Services</h1>
<div id="map"></div>
</div>
</div>
</div>
</section>
谢谢。
如果您正在使用 jQuery(您的页面上可能已经有 - bootstrap),您可以将代码包装在 document.ready() 函数中,如下所示:
$(document).ready(function() {
// Code to execute
});
在页面加载完成后 运行。 https://learn.jquery.com/using-jquery-core/document-ready/
使用 jQuery,您还可以 运行 按钮点击代码,如下所示:
$('#mybutton').on('click', function() {
//Code to execute
});
在此处查看 on() 的文档 http://api.jquery.com/on/
通过将此用于滚动和单击(单击按钮时页面滚动到一个部分)解决了这个问题:
$(window).scroll(function() {
if(isScrolledIntoView($(find)))
{
setTimeout(function() {
initMap();
}, 900);
}
});
function isScrolledIntoView(elem)
{
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
.scroll() 中的 setTimeout 是必需的,因为当用户单击另一个按钮(位于本节下方)时,它将在没有 setTimeout 的情况下执行。不确定 setTimeout 是否可以低于 900,但目前可以正常工作。
从这个线程的答案中得到 isScrolledIntoView():Check if element is visible after scrolling