Question

您好我的网站有一个固定的水平导航栏，当我放大时我在移动设备上滚动它时遇到问题。我做了研究，解决这个问题的唯一方法就是使用javascript。

我发现了一个jquery解决方案（下面），但是我很难将它变成一个角度指令。有帮助吗？感谢

jquery我正试图变成一个角度指令

if ($(window).width() < 990) {
$('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
$('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
 }
 $(window).scroll(function() {
if ($(window).width() < 990) {
$('#copyright').css({ 'left': (20 - $(window).scrollLeft()) + 'px' });
$('#click-to-call, #erving').css({ 'right': (20 + $(window).scrollLeft()) + 'px'});
}
else {
$('#copyright').css({ 'left': '20px' });
$('#click-to-call, #erving').css({ 'right': '20px' });
}
  });

Answer 1

这样的事情：

angular.module('myapp')
.directive('fixedBar', function ($window) {
  return {
    restrict: 'A',
    link: function (scope, element) {
      $win = angular.element($window);
      // Assuming these elements are static
      $lefties = element.find('#copyright');
      $righties = element.find('#click-to-call, #erving');

      function updateBar() {
        if ($win.width() < 990) {
          $lefties.css({ 'left': (20 - $win.scrollLeft()) + 'px' });
          $righties.css({ 'right': (20 + $win.scrollLeft()) + 'px'});
        } else {
          $lefties.css({ 'left': '20px' });
          $righties.css({ 'right': '20px' });
        }
      }

      $win.on('scroll', updateBar);

      updateBar();
    }
  }
}

允许你这样做：

<nav fixed-bar>
  <div id="copyright"></div>
  <div id="click-to-call"></div>
  <div id="erving"></div>
</nav>

在移动设备上查看固定标头

1 个答案: