Question

我正在使用此免费模板构建我正在构建的网站：http://blackrockdigital.github.io/startbootstrap-scrolling-nav/

我正在使用地理定位服务（谷歌）。但我不想强迫用户推动＆＃34;批准＆＃34;每当他们进入网站时，只有当用户导航到/推送＆＃34;服务＆＃34;按钮/区域，然后我想要我的地理定位功能执行。有人知道如何解决这个问题吗？

我可以以某种方式检查他们在网站上的位置吗？我可以获取部分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>

感谢。

Answer 1

如果你正在使用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
});

请参阅此处{（3}}

的on（）文档

Answer 2

通过使用它进行滚动和点击解决它（当点击按钮时页面滚动到一个部分）：

$(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

用户导航到特定部件时执行功能（地理定位）

2 个答案: